Vue.js 2个带有预输入的标签 - vue-tagsinput

Vue.js 2个带有预输入的标签 - vue-tagsinput
插件名称 vue-tagsinput
发布时间 2020年10月29日
插件作者 AlexMordred

Vue.js 2应用程序的标签输入组件,支持预输入和自动完成功能。

NPM安装

npm i @voerro/vue-tagsinput --save-dev

npm i @voerro/vue-tagsinput --save

然后向Vue注册组件:

import VoerroTagsInput from '@voerro/vue-tagsinput';
Vue.component('tags-input', VoerroTagsInput);

用法

<tags-input element-id="tags"
    v-model="selectedTags"
    :existing-tags="[
        { key: 'web-development', value: 'Web Development' },
        { key: 'php', value: 'PHP' },
        { key: 'javascript', value: 'JavaScript' },
    ]"
    :typeahead="true"></tags-input>
<tags-input element-id="tags"
    v-model="selectedTags"
    :existing-tags="[
        { key: 1, value: 'Web Development' },
        { key: 2, value: 'PHP' },
        { key: 3, value: 'JavaScript' },
    ]"
    :typeahead="true"></tags-input>

element-id将被应用到idname包含所选标签作为其值的列表中的隐藏的输入的属性。(可选)您还可以使用v-model指令将变量绑定到所选标签的数组。

existing-tags是所有现有/有效标签的列表。包括它,即使您不使用typeahead。

以编程方式设置所选标签

如果需要以编程方式(手动)设置或从“外部”更改选定标签的列表,只需通过将所需值设置为与组件绑定的变量即可v-model

例如,变量名称为selectedTags

<tags-input element-id="tags" 
    v-model="selectedTags"></tags-input>

您可以预设此变量的值:

new Vue({
    el: '#app',

    components: { VoerroTagsInput },

    data: {
        selectedTags: [
            { key: 'web-development', value: 'Web Development' },
            { key: 'php', value: 'PHP' },
            { key: 'javascript', value: 'JavaScript' },
        ],
    }
});

…或在需要时进行更改:

new Vue({
    el: '#app',

    components: { VoerroTagsInput },

    data: {
        selectedTags: [],
    },

    methods: {
        setSelectedTags() {
            this.selectedTags = [{ key: 'php', value: 'PHP' }];
        }
    }
});