在前端开发中，经常需要制作类似标签的 UI 组件，比如标签输入框、标签展示列表等。这时，我们可以使用一个方便的 npm 包：vue-chip。
安装
使用 npm 进行安装：
--- ------- -------- ------
使用
在项目中引入 vue-chip 组件：
------ --- ---- ----- ------ ------- ---- ---------- ----------------
组件
vue-chip 提供了三个组件：
Input
Input 组件可以让用户输入标签并显示已选标签。
使用方式：
----------
---------------
-----------------
------------------
-----------在 data 中定义 tagList 数组，即可将用户输入的标签存储在其中。
------ -
------ -
-------- --
-
-List
List 组件可以展示已选择的标签列表。
使用方式：
----------
--------------
---------------
-------------------
-----------------
-----------其中，:tags 属性为已选择的标签数组，@remove 事件为删除标签时触发的方法。
---------------- - -------------------------- -- -
Tag
Tag 组件为单个标签，可供其他组件使用。
使用方式：
----------
-------------
----------
-------------------
----------------
-----------其中，:tag 属性为标签内容，@remove 事件为删除该标签时触发的方法。
----------- - -------------------- -
示例代码
下面是一个完整的示例：
----------
-----
---------------
-----------------
------------------
--------------
---------------
-------------------
-----------------
------
-----------
--------
------ ------------ ---- -----------------------------------
------ ----------- ---- ----------------------------------
------ ------- -
----------- -
-------------
-----------
--
------ -
------ -
-------- -------- ------- -------
-
--
-------- -
---------------- -
-------------------------- --
-
-
-
---------总结
使用 vue-chip，我们可以快速制作标签相关的 UI 组件，大大提高开发效率。希望本篇文章对大家的学习和开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600572c781e8991b448e8ecc