vue.js 组件用作标签_一个Vue.js组件，用于添加和删除标签

vue.js 组件用作标签

Vue标签组件 (vue-tags-component)

The package contains a Vue.js component for adding and removing tags.

该软件包包含一个Vue.js组件，用于添加和删除标签。

特征 (Features)

• keyboard control

  键盘控制

• search

  搜索

• events

  大事记

• tabindex

  标签索引

安装 (Installation)

You can install the package via npm:

您可以通过npm安装该软件包：

$ npm install --save vue-tags-component

or yarn:

或纱线：

$ yarn add vue-tags-component

用法 (Usage)

The most common use case is to register the component globally:

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

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

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

On your page you can now use html like this:

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

<vue-tags
    :active="activeTags"
    :all="allTags"
    :element-count-for-start-arrow-scrolling="3"
    :tab-index="1"
    :colors="false"
    :tagColorDefault="'green'"
    @on-tag-added="onTagAdded"
    @on-tag-removed="onTagRemoved"
    @on-tag-list-opened="onTagListOpened"
    @on-tag-list-closed="onTagListClosed"
/>

All props and events are indicated in the example above. Tags should look like this:

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

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

去做 (TODO)

• Closing the drop-down list when clicking outside the component.

  在组件外部单击时，关闭下拉列表。

• Remove already added tags from the general list of tags. In the search, you can not find an already added tag.

  从标签的常规列表中删除已添加的标签。 在搜索中，找不到已添加的标签。

• Make the functionality of creating a new tag, add a tag creation event. Make this functionality optional (the ability to enable via props).

  进行创建新标签的功能，添加标签创建事件。 将此功能设为可选(通过道具启用的功能)。

• Validating tag objects in the prop, the tag must contain name, slug, and color.

  在验证道具中的标签对象时，标签必须包含名称，子弹和颜色。

• To think up a convenient way of styling (redefining standard styles or some other way).

  想出一种方便的样式方式(重新定义标准样式或其他方式)。

• Adaptive layout.

  自适应布局。

• Animation.

  动画。

• Placeholder for the search string (do you need?). Show the placeholder only when no tag is selected.

  搜索字符串的占位符(您需要吗？)。 仅在未选择标签的情况下显示占位符。

• tagColorDefault prop validation.

  tagColorDefault属性验证。

大事记 (Events)

onTagAdded (onTagAdded)

Called when the tag is added to the active list, it passes the tag object.

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

onTagRemoved (onTagRemoved)

Called when the tag is removed from the active list, it passes the tag object.

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

onTagListOpened (onTagListOpened)

Called when opening a list of tags.

打开标签列表时调用。

onTagListClosed (onTagListClosed)

Called when the list of tags is closed.

当标签列表关闭时调用。

翻译自: https://vuejsexamples.com/a-vue-js-component-for-adding-and-removing-tags/

vue.js 组件用作标签