Vue.js 2标签组件，允许添加和删除标签。

特征

• 键盘控制
• 搜索
• 事件
• 标签索引
• 彩色标签
• 标签创建

安装和下载：

# Yarn
$ yarn add vue-tags-component

# NPM
$ npm install vue-tags-component --save

用法

最常见的用例是在全局范围内注册组件：

import Vue from 'vue';
import { VueTags } from 'vue-tags-component';

Vue.component('vue-tags', VueTags);

现在，您可以在页面上使用html，如下所示：

<vue-tags
    :active="activeTags"
    :all="allTags"
    :element-count-for-start-arrow-scrolling="3"
    :tab-index="1"
    :tag-creation-enabled="true"
    :colors-enabled="false"
    :colors="colors"
    :tag-color-default="'green'"
    :tag-list-label="'选择一个选项'"
    :placeholder="'选择一个选项'"
    @on-tag-added="onTagAdded"
    @on-tag-removed="onTagRemoved"
    @on-tag-list-opened="onTagListOpened"
    @on-tag-list-closed="onTagListClosed"
    @on-tag-created="onTagCreated"
/>

上面的示例中指出了所有 props 和事件。标签应如下所示：

[
    {
        "id": 1,
        "name": "Tag",
        "slug": "tag (optional)",
        "color": "#963dff (optional)"
    }
]

事件

on-tag-added

将标签添加到活动列表时调用，它传递标签对象。

on-tag-removed

当标签从活动列表中删除时调用，它传递标签对象。

on-tag-list-opened

打开标签列表时调用。

on-tag-list-closed

当标签列表关闭时调用。

on-tag-created

在创建新标签时调用，它传递id = 0的标签对象（必须更改标识符，因为0表示要创建的标签）。该组件不会处理标签的slug字段，slug将等于标签的名称，您可以根据需要进行处理（例如tag.slug.toLowerCase (). Replace (/ / g, '_')）。