简介
tagify-vue 是一款基于 Vue.js 的标签输入组件，能够帮助前端开发者快速实现标签输入功能。该组件提供了多种 UI 样式选择和自定义选项，支持键盘快捷键和标签自动完成功能。
安装
使用 npm 安装 tagify-vue：
npm install tagify-vue --save
使用
在 Vue.js 项目中引入 tagify-vue 组件：
-- -------------------- ---- -------
----------
-----
-----------
------------
--------------------
-------------------
-------------------------
--
------
-----------
--------
------ --------- ---- -------------
------ ------- -
----------- -
----------
--
------ -
------ -
----- ---
--------- -
-- ----
--
--
--
-------- -
--------------------- -
-- --------
--
------------------------ -
-- --------
--
--
--
---------属性
| 属性名 | 类型 | 描述 |
|---|---|---|
| tags | Array | 绑定的标签数据，数组内为标签对象，包含 id 和 value 两个属性 |
| settings | Object | 组件的配置选项 |
| placeholder | String | 组件的输入框默认提示文本 |
| disabled | Boolean | 组件是否禁用。默认值为 false |
| maxTags | Number | 最多选择的标签数。默认值为 Infinity |
| onlyUnique | Boolean | 是否只允许选择唯一的标签。默认值为 true |
| suggestions | Array | 组件的标签自动完成选项。默认值为 [] |
方法
| 方法名 | 参数 | 描述 |
|---|---|---|
| handleAddTag | tagData | 处理添加标签事件。tagData 为添加的标签数据，包含 id 和 value 两个属性 |
| handleRemoveTag | tagData | 处理删除标签事件。tagData 为删除的标签数据，包含 id 和 value 两个属性 |
事件
| 事件名 | 参数 | 描述 |
|---|---|---|
| add | tagData | 添加标签事件，tagData 为添加的标签数据，包含 id 和 value 两个属性 |
| remove | tagData | 删除标签事件，tagData 为删除的标签数据，包含 id 和 value 两个属性 |
配置选项
tagify-vue 组件提供了多种配置选项，包括以下：
| 选项名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| maxTags | Number | Infinity | 最多选择的标签数 |
| onlyUnique | Boolean | true | 是否只允许选择唯一的标签 |
| whitelist | Array | [] | 白名单，只允许选择指定的标签 |
| blacklist | Array | [] | 黑名单，不允许选择指定的标签 |
| dropdown | Object | {} | 下拉菜单相关配置 |
| autocomplete | Object | {} | 标签自动完成相关配置 |
| callbacks | Object | {} | 回调函数提供的钩子函数 |
下面是一个配置示例：
-- -------------------- ---- -------
------------- - -
-------- -- -- ---- - ---
----------- ----- -- ----------
---------- -------------- --------- -------- ----------- -- --------------
---------- ------- -------- -- --------------
--------- -
---------- -----------
-------- --
--------- --
----------- --------- --------
--
------------- -
-------- --
--------- -----
--------- --------
------------ -----
--
---------- -
---- ----------------
------- ------------------
--
--结语
使用 tagify-vue 可以快速实现标签输入功能，省去了自己写样式和实现复杂逻辑的麻烦。该组件提供了强大的自定义选项和回调钩子函数，可以灵活适应不同的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600f81e8991b448ddf1e