简介
做前端的同学肯定会经常使用 npm 包管理工具进行依赖包的安装及管理，但是很多时候我们在项目中需要选择一定数量的标签进行筛选或者多选，tag-you-are 就是一个好用的 npm 包。在本篇教程中，将会详细介绍 tag-you-are 的使用方式及示例代码，帮助大家更好地使用该npm 包。
安装
在安装之前，确保您已经安装了 Node.js 和 npm。使用以下命令安装 tag-you-are 包。
npm install tag-you-are
基本用法
下面我们用一个简单的示例来说明 tag-you-are 包的基本用法。
首先在 HTML 文件中添加一个 div 元素，作为 tag-you-are 容器。
<div id="tag-container"></div>
接下来，在你的 JavaScript 文件中，通过以下方式将 tag-you-are 绑定到容器中：
-- -------------------- ---- -------
------ --- ---- --------------
-----
---------- ----------------- -- -----
----- --------- --------- ------- ---------- -- -----
------------- ---------- -- -------
--------- ---------------------- - -- ----------
--------------------------
-
---以上代码中，选项 ccontainer 指定了 tag-you-are 的容器选择器。tags 属性指定了所有允许的标签，selectedTags 属性指定了初次加载时默认选中的标签。
当用户切换标签时，onChange 函数将被调用。在上面的示例中，onChange 函数会把用户选中的标签作为参数打印出来。
细节用法
除了基本用法之外，tag-you-are 还有一些其它的设置可以满足更高级的需求。下面我们将针对一些常用设置进行介绍。
禁用
你可以通过设置 disabled 属性来禁用 tag-you-are，从而避免用户在标签上进行操作。
tag({
container: '#tag-container', // 容器选择器
tags: ['Apple', 'Banana', 'Pear', 'Orange'],
disabled: true // 禁用
});多选
如果需要支持多选，可以将 multiple 属性设置为 true。
tag({
container: '#tag-container', // 容器选择器
tags: ['Apple', 'Banana', 'Pear', 'Orange'],
multiple: true // 多选
});标签输入框
在 tag-you-are 内，可以启用一个文本框，允许用户输入新标签。用户输入的标签将被添加到标签列表中。这个功能可以通过将 allowNew 属性设置为 true 启用。
tag({
container: '#tag-container', // 容器选择器
tags: ['Apple', 'Banana', 'Pear', 'Orange'],
allowNew: true // 允许新标签
});标签过滤器
你可以通过设置 filter 属性来对标签进行过滤。传入的函数应返回一个布尔值，表示标签是否应被过滤掉。以下代码过滤掉名为 Banana 的标签。
tag({
container: '#tag-container', // 容器选择器
tags: ['Apple', 'Banana', 'Pear', 'Orange'],
filter: function(tag) { // 过滤器函数
return tag !== 'Banana';
}
});示例代码
为了让大家更好地理解 tag-you-are 的使用方式，下面提供一份完整的示例代码。
-- -------------------- ---- -------
--------- -----
------
------
---------- --- --- - ----------
----- ----------------
------- --------------
------ --- ---- --------------
-----
---------- -------- -- -----
----- --------- --------- ------- ---------- -- -----
------------- ---------- -- -------
--------- ----- -- -----
------- ------------- - -- -----
------ --- --- --------- -- -----
--
--------- -------------- - -- ---------
------------------
-
---
---------
-------
------
------- --- --- - -------
---- ----------------
-------
-------总结
tag-you-are 是一个好用的 npm 包，能够非常方便地为项目添加标签选择、多选、过滤等功能。在本文中，我们介绍了 tag-you-are 的基本用法和一些常用设置，希望对您的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005739081e8991b448e982e