vue-multiple-select是一个开源的Vue.js多选选择器插件，它提供了易于使用和高度可定制的用户界面，可帮助开发人员添加多选选择器到他们的Web应用程序中。在这篇文章中，我们将深入探讨如何使用这个npm包。
安装
使用npm进行安装:
npm install vue-multiple-select --save
使用
在vue组件中导入vue-multiple-select包，并使用v-model指令绑定数组作为所选项的容器。
-- -------------------- ---- -------
----------
---- ---------
---------------- ------------------------------------------
------
-----------
--------
------ -------------- ---- ---------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------------- --
-
-
-
---------这将导入大部分vue-multiple-select特性，如下拉菜单，多选框和搜索框等等。
选项
我们可以通过option属性来提供选项给选择器。
-- -------------------- ---- -------
----------
---- ---------
---------------- ----------------------- -------------------------------------
------
-----------
--------
------ -------------- ---- ---------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------------- ---
-------- -
-
----- ---------
------ -----
--
-
----- -----------
------ -------
--
-
----- -------------
------ ---------
--
-
----- -----------
------ -------
-
-
-
-
-
---------这将提供四个选项，并在选择时更新selectedItems数组。如果你希望选择器显示选项的其他属性，请使用label属性为每个选项提供属性名称：
-- -------------------- ---- -------
----------
---- ---------
---------------- ----------------------- ------------------ -------------------------------
------
-----------
--------
------ -------------- ---- ---------------------
------ ------- -
----------- -
--------------
--
------ -
------ -
-------------- ---
-------- -
-
----- ---------
------ -----
--
-
----- -----------
------ -------
--
-
----- -------------
------ ---------
--
-
----- -----------
------ -------
-
-
-
-
-
---------这将显示每个选项的text值而不是它的value属性。
样式
vue-multiple-select是高度可定制的，你可以轻松地编辑样式或使用CSS框架。以下样式可以轻松地将样式应用于选择器。
-- -------------------- ---- -------
------------------- -
------- --- ----- -----
----------- -----
----------- - --- --- ------- -- -- -----
--------- ---------
-------- --
----------------- -----
----------- -----
------ -----
-
----------------- -
-------- ---- -----
------- --------
------- -
----------------- --------
-
----------- -
----------------- --------
-
-
------------------- -
-------- ---- -----
------------ -----
----------------- --------
------- -----
-------- ------
------ -----
----------- -----
------------ ----
--------- -
-------- --- -----
-
-
---------------------- -
----------- ------
----------- -----
----------------- -
---------- -----
------ -----
-
-------- -
-------- -----
----------- -------
---------- -----
------ -----
-
-
总结
在这篇文章中，我们深入探讨了如何使用npm包vue-multiple-select，并提供了许多示例代码。通过此vue组件，开发人员可以很容易地将多选选择器添加到他们的web应用程序中，非常方便。我们也解释了如何为选择器提供选项和定制样式。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc681e8991b448dd33e