前言
在前端开发中，复选框常常作为用户选择、分类的方式出现。针对这种需求，我们可以使用已有的UI组件库，也可以自己写一个。为了方便开发，我们可以使用 recruit-tag-checkbox 这个可重复使用的npm包解决复选框的问题。
安装
在项目根目录下执行以下命令：
--- ------- -------------------- ------
使用
引入组件
在需要使用的页面中引入RecruitTagCheckbox组件：
-- --
------ ------------------ ---- -----------------------
-- --
------ ------- -
----------- -
------------------
--
--基础用法
--------------------- ------------ --
需要在data中定义tags：
------ ------- -
------ -
------ -
----- -
-
--- --
------ -------
-------- ------
--
-
--- --
------ -------
-------- -----
--
-
--- --
------ ---------
-------- ------
-
--
--
--
--高级用法
可以设置tag的样式，实现更精细化的UI效果：
--------------------- ------------ ---------------------- --
------ ------- -
------ -
------ -
----- -
-
--- --
------ -------
-------- ------
--
-
--- --
------ -------
-------- -----
--
-
--- --
------ ---------
-------- ------
-
--
---------- -
---------- -
---------------- ----------
------ ----------
--
-------- -
---------------- ----------
------ ----------
-
-
--
--
--示例代码
----------
-----
------------------------ -------
--------------------- ------------ --
----
-------------
--------------------- ------------ ---------------------- --
------
-----------
--------
-- --
------ ------------------ ---- -----------------------
-- --
------ ------- -
----- ------
----------- -
------------------
--
------ -
------ -
----- -
-
--- --
------ -------
-------- ------
--
-
--- --
------ -------
-------- -----
--
-
--- --
------ ---------
-------- ------
-
--
---------- -
---------- -
---------------- ----------
------ ----------
--
-------- -
---------------- ----------
------ ----------
-
-
--
--
--
---------总结
recruit-tag-checkbox 这个 npm 包提供了方便实用的组件，可以快速解决前端复选框的问题。它可以设置基础样式或者根据需求精细化样式，使用非常灵活。在项目中需要用到复选框的地方，可以考虑使用这个npm包来简化代码和提升开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedabf1b5cbfe1ea06108d8