78 lines
2.4 KiB
Vue
78 lines
2.4 KiB
Vue
<template>
|
|
<div class="form-control h-auto" @click="$refs.input.focus()">
|
|
<ul class="list-inline d-inline">
|
|
<li v-for="(tag, i) in tags"
|
|
class="list-inline-item badge badge-primary"
|
|
style="cursor: pointer;"
|
|
@click="removeTag(i)"><span class="oi oi-tag"></span> {{ tag }} | x</li>
|
|
</ul>
|
|
<input :id="id"
|
|
ref="input"
|
|
type="text"
|
|
style="border: 0; outline: 0;"
|
|
v-model="buffer"
|
|
@keydown="onKeyDown">
|
|
</div>
|
|
</template>
|
|
|
|
<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(Boolean) readonly isInvalid!: boolean;
|
|
|
|
tags: string[] = [];
|
|
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) {
|
|
case 'Tab':
|
|
case 'Enter':
|
|
case ' ':
|
|
if ((event as any).isComposing !== true) {
|
|
this.tags.push(this.buffer);
|
|
this.buffer = "";
|
|
this.sync();
|
|
}
|
|
event.preventDefault();
|
|
break;
|
|
}
|
|
} else if (event.key === "Enter") {
|
|
// 誤爆防止
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
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(" ");
|
|
}
|
|
}
|
|
}
|
|
</script>
|