Vue.js标签组件,添加和删​​除标签– vue-tags-component

Vue.js标签组件,添加和删​​除标签– vue-tags-component
插件名称 vue-tags-component
发布时间 2020年7月26日
插件作者 seniorcote

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, '_'))。