简介
telvin-vue-input-tag 是一个 Vue.js 的 UI 组件包，用于在表单中添加带有标签的输入框。它提供了许多有用的功能以及高度的可定制性，并在 Github 上得到了广泛的支持和推广。
本文将介绍如何在您的 Vue.js 项目中使用 telvin-vue-input-tag。
安装
通过 npm 安装该包，使用以下命令：
npm install telvin-vue-input-tag --save
引入
要使用 telvin-vue-input-tag 组件，需要将其添加到 Vue 项目中的 components 文件夹中。假设您已经将该组件添加到 components 文件夹中并命名为 TagInput，您可以通过以下方式在您的组件中引入该组件：
-- -------------------- ---- -------
----------
-----
------ ---------------------
---------- ------------ ---------------------------- --
------
-----------
--------
------ -------- ---- ---------------------------
------ ------- -
----------- - -------- --
------ -
------ -
----- --
-
--
-------- -
--------------------- -
--------------------
-
--
-
---------属性
以下是 tag-input 支持的属性列表：
| 属性 | 类型 | 是否必须 | 描述 |
|---|---|---|---|
tags |
Array |
true |
显示当前已选择的标签列表。 |
maxTags |
Number |
false |
允许选择标签的最大数量。 |
unique |
Boolean |
false |
设置为 true ，则添加重复的标签时会被忽略。 |
事件
以下是 tag-input 支持的事件列表：
| 事件 | 参数 | 描述 |
|---|---|---|
tags-changed |
newTags: [] |
当用户添加或删除标签时触发，返回新的标签数组。 |
你可以使用 @tags-changed 来订阅 tags-changed 事件:
<tag-input :tags="tags" @tags-changed="onTagsChange" />
自定义
您可以通过在 props 中设置自定义组件的样式、标签文本等：
-- -------------------- ---- -------
----------
-----
------ ----------------- -------------
----------
-----------------
--------------
--------------
---------------- ----
-----------------------
--
------
-----------
--------
------ -------- ---- ---------------------------
------ ------- -
----------- - -------- --
------ -
------ -
---------- --
-
--
-
---------
-------
---------------- -
------- --- ----- -----
----------------- -----
------ ------
------- -----
---------- -----
-------- -----
-
--------示例代码
-- -------------------- ---- -------
----------
-----
------ ----------------------
---------- ----------------- ---------------------------- --
------
-----------
--------
------ -------- ---- ---------------------------
------ ------- -
----------- - -------- --
------ -
------ -
---------- --------- ---------
-
--
-------- -
--------------------- -
--------------------
-
-
-
---------
-------
-------------- -
------- --- ----- -----
----------------- -----
------ ------
------- -----
---------- -----
-------- -----
-
--------总结
在本教程中，我们了解了如何在您的 Vue.js 项目中使用 telvin-vue-input-tag 组件。我们介绍了安装、引入、属性、事件和自定义等方面。如果你想要简化表单数据的输入并且用标签标注它，那么这个组件包是不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601881e8991b448de3ca