简介
vue-dual-listssss 是一款基于 Vue.js 的双向列表组件，可以用于实现双向选择或者排序等功能。该组件提供了丰富的选项配置和事件回调，易于使用和扩展。
安装
通过 npm 安装 vue-dual-listssss：
--- ------- ----------------- ------
然后在你的 Vue.js 项目中引入该组件：
------ --------------- ---- -------------------
使用
在 Vue.js 的模板中引入 VueDualListssss 组件：
---------- ------------------ --------------------------------------- -----------
VueDualListssss 组件的默认插槽可以用于自定义列表项的渲染，例如：
----------
------------------ -------------------
--------- ----------- ------------- ---- ---
-------- --------- ---------
------- -------------------------------------
-----------
--------------------
-----------VueDualListssss 组件有如下可配置的选项：
items：列表项的数据数组，必须为对象数组，每个对象应该包含id和text两个属性。selected：选中的列表项的 id 数组。disabled：禁用的列表项的 id 数组。showSearch：是否显示搜索框。searchPlaceholder：搜索框的占位文本。addButtonText：添加按钮的文本。removeButtonText：移除按钮的文本。
举例来说，如果你想要一个包含五个列表项的双向选择组件，可以在 Vue.js 中这样定义组件实例：
--- -----
--- -------
----- -
-------- -
------ -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
--
--------- ---
--------- --- ---
----------- -----
------------------ ------------
-------------- ------
----------------- ---------
-
--
--事件
VueDualListssss 组件提供了如下事件回调：
add：添加列表项时触发，参数为添加的列表项的 id 数组。remove：移除列表项时触发，参数为移除的列表项的 id 数组。move：移动列表项时触发，参数为移动前的列表项的 id 数组和移动后的列表项的 id 数组。search：搜索列表项时触发，参数为搜索关键字。
你可以在 Vue.js 中使用 .sync 修饰符或者 $emit 方法来处理事件，例如：
----------
------------------ ----------------------- ------------ ---------------------------------------
-----------
--------
--- -----
--- -------
----- -
-------- -
-- ---
-
--
-------- -
--------------- -
---------------------
--
------------------ -
---------------------
-
-
--
---------总结
VueDualListssss 组件是一个易于使用和扩展的双向列表组件，可以用于实现双向选择或者排序等功能。通过本文，你已经掌握了该组件的安装和使用方法，并了解到了其丰富的选项配置和事件回调。希望本文能够对你学习和使用 Vue.js 带来指导意义。完整示例代码如下所示：
----------
---- ---------
------------------ ----------------------- ------------ -------------------
--------- ----------- ------------- ---- ---
-------- --------- ---------
------- -------------------------------------
-----------
--------------------
------
-----------
--------
------ --------------- ---- -------------------
--- -----
--- -------
----- -
-------- -
------ -
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
- --- -- ----- ------- -- --
--
--------- ---
--------- --- ---
----------- -----
------------------ ------------
-------------- ------
----------------- ---------
-
--
----------- -
---------------
--
-------- -
--------------- -
---------------------
--
------------------ -
---------------------
--
------------ -
----- ----- - ------------------------------- -- -- -- -- --- --------
-------------------------------- --
-
-
--
---------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005578581e8991b448d4841