文档链接:http://www.vue-tags-input.com/#/examples/autocomplete
需求: 输入英文状态逗号、分号、空格、回车进行分隔,也可联想输入
npm install @johmun/vue-tags-input
import VueTagsInput from '@johmun/vue-tags-input';
<vue-tags-input :preventAddingDuplicates="false" v-model="tag" :tags="tags" :autocomplete-items="autocompleteItems" :add-on-key="[';', ',', ' ', 13]" @tags-changed="newTags => tags = newTags" />
add-on-key: 按下其中之一,则会从输入值中生成一个标签,可以接受keycode值(回车:13)
autocompleteItems: 联想的数据
data() {
return {
tag:'',
tags: [],
autocompleteItems: [
{text: '张三'},
{text: '李四'},
{text: '王五'},
{text: '麻子'},
{text: '小二'},
{text: '王八'},
]
};
},