一、前言
在前端开发过程中，我们经常会遇到需要添加标签的需求。而 npm 包 jm-tag 就是一个方便快捷地添加标签的工具。本文将详细讲解 jm-tag 的使用方法，并且通过示例代码指导读者如何快速上手。
二、安装
使用 npm 安装 jm-tag：
npm install jm-tag --save
三、使用
1. 引入
在需要使用 jm-tag 的组件中引入：
import JmTag from 'jm-tag';
2. 基本用法
在模板中使用 JmTag 标签：
<jm-tag :list="['标签1', '标签2', '标签3']" :selected="['标签1', '标签3']" @change="handleChange"> </jm-tag>
注释：
list：标签列表selected：已选中的标签列表change：选中/取消选中标签时的回调函数
3. Props
1. list
类型：Array
默认值：[]
描述：标签列表。
2. selected
类型：Array
默认值：[]
描述：已选中的标签列表。
3. max
类型：Number
默认值：-1
描述：标签选择的最大数量，默认为不限制。
4. theme
类型：String
默认值：'default'
描述：标签主题颜色。目前支持 default、primary、success、warning、danger。
5. disabled
类型：Boolean
默认值：false
描述：是否禁用标签选择。
4. Methods
1. getSelected
描述：通过调用该方法，可以获取已选中的标签列表。
用法：
this.$refs.jmTag.getSelected();
5. 示例代码
-- -------------------- ---- -------
----------
-----
-------
-----------
---------------
---------------------------
--------------
--------
--------------------
-----------------------
---------
------
------- --------------- --------
-----------
--------
------ ----- ---- ---------
------ ------- -
----------- -
-----
--
------ -
------ -
-------- ------- ------ ------ ------ -------
---------------- ------- -------
------ ----------
--------- -----
--
--
-------- -
----------------------------- -
-----------------------------
-------------------- - ----------------
--
----------------- -
--------------------------------------------
-
-
--
---------四、总结
本文详细介绍了前端开发中 npm 包 jm-tag 的使用方法，并通过示例代码演示了在 Vue.js 框架下如何使用 jm-tag。希望读者能够学会如何使用 jm-tag 轻松实现标签选择功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c181e8991b448e31c5