简介
vue2-checklist 是一款基于 Vue2 的轻量级、易用的多选框组件，可以帮助开发者快速构建多选框组件。
安装
使用 npm 安装 vue2-checklist：
npm install vue2-checklist
引入
在项目中使用 vue2-checklist：
import Vue from 'vue' import Vue2Checklist from 'vue2-checklist' Vue.use(Vue2Checklist)
使用
vue2-checklist 支持在父组件中传入选项和绑定选中的数据：
-- -------------------- ---- -------
----------
--------------- ------------------------- ------------------------------------
-----------
--------
------ ------- -
---- -- -
------ -
-------- -
- ----- ------ ------ --------- --
- ----- ------ ------ --------- --
- ----- ------ ------ --------- -
--
---------------- --
-
-
-
---------如果在父组件中需要监听选中的数据变化，可以监听 vue2-checklist 的 change 事件：
-- -------------------- ---- -------
----------
--------------- ------------------------- ------------------ ----------------------------------------
-----------
--------
------ ------- -
---- -- -
------ -
-------- -
- ----- ------ ------ --------- --
- ----- ------ ------ --------- --
- ----- ------ ------ --------- -
--
---------------- --
-
--
-------- -
------------ ------- -
------------------
-
-
-
---------自定义样式
vue2-checklist 的样式可以通过修改样式变量或者覆盖样式类来实现。下面以修改样式变量的方式为例：
-- -------------------- ---- -------
-- ------
----------------------------- --------
-- -- -------------- ---
------- ------------------------------------------
-- -----
---------------------- -
-- -----
----------------- --------
-- -------
------------- - ------------- -
------------- -----------------------------
----------------- -----------------------------
-
-- ---------
------------- - ------------ -
------ -----------------------------
-
-结语
vue2-checklist 是一款非常适用于 Vue2 的多选框组件，可以快速地在项目中使用。通过本文，你学会了如何使用 vue2-checklist 和自定义其样式，相信对你在前端开发中有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f73238a385564ab6848