pepepper/tissue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

タグ用のhidden inputもComponent内に含めるようにした

Browse Source
This commit is contained in:
shibafu 2019-06-05 00:46:30 +09:00
parent c7d88076fa
commit 9471683741
3 changed files with 8 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/assets/js/components/TagInput.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="form-control h-auto" @click="$refs.input.focus()">
<input :name="name" type="hidden" :value="tagValue">
<ul class="list-inline d-inline">
<li v-for="(tag, i) in tags"
class="list-inline-item badge badge-primary tag-item"
@ -17,30 +18,16 @@
<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
function getElementByName(elementName: string): HTMLElement | null {
const elements = document.getElementsByName(elementName);
if (elements.length) {
return elements[0];
}
return null;
}
@Component
export default class TagInput extends Vue {
@Prop(String) readonly id!: string;
@Prop(String) readonly input!: string;
@Prop(String) readonly name!: string;
@Prop(String) readonly value!: string;
@Prop(Boolean) readonly isInvalid!: boolean;
tags: string[] = [];
tags: string[] = this.value.trim() !== "" ? this.value.trim().split(" ") : [];
buffer: string = "";
mounted() {
const tags = getElementByName(this.input);
if (tags instanceof HTMLInputElement && tags.value.trim() !== "") {
this.tags = tags.value.split(" ")
}
}
onKeyDown(event: KeyboardEvent) {
if (this.buffer.trim() !== "") {
switch (event.key) {
@ -50,7 +37,6 @@
if ((event as any).isComposing !== true) {
this.tags.push(this.buffer);
this.buffer = "";
this.sync();
}
event.preventDefault();
break;
@ -63,14 +49,10 @@
removeTag(index: number) {
this.tags.splice(index, 1);
this.sync();
}
sync() {
const tags = getElementByName(this.input);
if (tags instanceof HTMLInputElement) {
tags.value = this.tags.join(" ");
}
get tagValue(): string {
return this.tags.join(" ");
}
}
</script>

3
resources/views/ejaculation/checkin.blade.php
View File

@ -38,9 +38,8 @@
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<input name="tags" type="hidden" value="{{ old('tags') ?? $defaults['tags'] }}">
<label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
<tag-input id="tagInput" input="tags" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
<tag-input id="tagInput" name="tags" value="{{ old('tags') ?? $defaults['tags'] }}" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
<small class="form-text text-muted">
Tab, Enter, 半角スペースのいずれかで入力確定します。
</small>

3
resources/views/ejaculation/edit.blade.php
View File

@ -39,9 +39,8 @@
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<input name="tags" type="hidden" value="{{ old('tags') ?? $ejaculation->textTags() }}">
<label for="tagInput"><span class="oi oi-tags"></span> タグ</label>
<tag-input id="tagInput" input="tags" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
<tag-input id="tagInput" name="tags" value="{{ old('tags') ?? $ejaculation->textTags() }}" :is-invalid="{{ $errors->has('tags') ? 'true' : 'false' }}"></tag-input>
<small class="form-text text-muted">
Tab, Enter, 半角スペースのいずれかで入力確定します。
</small>