在前端开发中，效率永远是我们最为追求的目标之一。而一个好的插件或者工具库，不仅能够提高我们的效率，还能够让我们的代码更加规范和易于维护。今天我将介绍一个基于 Vue.js 的多选框组件库： vue-element-multiple-input。
安装
在使用前，需要先安装该插件。
npm install --save vue-element-multiple-input
使用
我们先来看看如何在 Vue 组件中使用该插件。
第一步，添加组件模板代码：
<template>
<div>
<vue-element-multiple-input v-model="selectedItems" :options="items"></vue-element-multiple-input>
</div>
</template>第二步，将该组件引入到我们的 Vue 组件中：
-- -------------------- ---- -------
------ ----------------------- ---- ----------------------------
------ ------- -
----------- -
-----------------------
--
------ -
------ -
------ --------- --------- --------- --------
-------------- ---------
-
-
-这样就完成了 vue-element-multiple-input 的引入和使用。
配置
vue-element-multiple-input 有以下几个可配置属性：
options：多选框的选项，必选参数，类型为数组。v-model：多选框选中的值，必选参数，类型为数组。max：多选框可以选择的最大数量，默认值为Infinity。disabled：是否禁用多选框。label-key：选项对象中作为 label 的属性名，默认为'label'。value-key：选项对象中作为 value 的属性名，默认为'value'。
下面我们给出一个配置示例：
<vue-element-multiple-input
v-model="selectedItems"
:options="items"
:max="3"
:disabled="false"
label-key="name"
value-key="_id"
></vue-element-multiple-input>方法
vue-element-multiple-input 提供了一个方法 clear，用于清空多选框中的选中值。我们可以在 Vue 组件中通过 ref 来调用该方法：
-- -------------------- ---- -------
----------
-----
--------------------------- ------------------- ----------------------- ----------------------------------------------
------- ----------------------------------
------
-----------
--------
------ ------- -
-------- -
--------------- -
--------------------------------
-
-
-
---------这样我们就可以在页面上添加一个按钮，点击该按钮时清空已经选中的内容了。
总结
在本文中，我们介绍了一个非常实用的 Vue.js 组件库 vue-element-multiple-input，它可以帮助我们在开发过程中快速添加多选框，并且提供了各种配置和方法以适应不同的需求。如果您在前端开发中经常遇到需要添加多选框的情况，我相信该插件会给您带来很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005605b81e8991b448de7ff