前言
标签输入框是一个常用的表单控件，让用户输入多个选项值并缩短了输入时间。今天我们来探讨一下如何使用 @transtone/vue-tags-input 这个 npm 包来实现标签输入框的功能。
安装
使用 npm 安装 @transtone/vue-tags-input 包：
--- ------- ------ -------------------------
引入
你可以在你的 Vue 组件中使用该组件：
----------
-----
--------------- -------------- --------------------- --
------
-----------
--------
------ ------------ ---- ----------------------------
------ ------- -
----------- -
-------------
--
------ -
------ -
----- ---
--------- -------- ------ --------------
--
--
--
---------Props
tags (Array)
用户输入的标签值。
tagsList (Array)
推荐的标签列表。
tagClass (String)
标签的样式类名。
placeholder (String)
输入框的提示文本。
separator (String)
用户输入标签的分隔符，默认使用逗号(,)。
事件
tags-changed
当用户输入的标签值改变时触发。
----------
-----
--------------- ------------ --------------------------------- --
------
-----------
--------
------ ------------ ---- ----------------------------
------ ------- -
----------- -
-------------
--
------ -
------ -
----- ---
--
--
-------- -
-------------------------- -
---------------------
--
--
--
---------示例代码
以下是示例代码，你可以参考一下：
----------
-----
---------------
--------------
---------------------
-----------------
--------------
------------------ -----
----------------------
---------------------------------
--
---- ---------------------
----- ----------- ---------- -- ----- -----------
-- --- --
-------
------
------
-----------
--------
------ ------------ ---- ----------------------------
------ ------- -
----- ----------------
----------- -
-------------
--
------ -
------ -
----- ---
--------- -------- ------ ------------- --------- ---------
---------- ---- -- -- - ----
--
--
-------- -
-------------------------- -
---------------------
--
--
--
---------
------ -------
---------- -
-------------- -----
-
---- -
-------- -------------
-------- --- -----
----------------- -----
-------------- -----
------------- ----
-------------- ----
------- --------
-
------------- -
----------- -----
-
--------总结
在本篇文章中，我们了解了如何使用 @transtone/vue-tags-input 来实现标签输入框的功能。如果你希望更深入地了解 Vue.js 开发，请参考 Vue.js 官网学习。如果你对本文内容有任何疑问或建议，欢迎在下方评论区留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b5751ab1864dac66d41