简介
wepy-com-selectab 是一款基于 wepy 框架的可多选、单选、搜索的下拉选择框组件。它提供了一种方便、快捷的方式来实现下拉选择框。
安装
使用 npm 安装 wepy-com-selectab，并将其添加到您的项目中：
npm install wepy-com-selectab --save
使用
注册组件
wepy-com-selectab 的使用非常简单，只需要在您的 wepy 框架中将其注册为一个组件即可。
-- -------------------- ---- -------
----------
------------------ ------------------ -----------------------------------------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- -
-------------------- ---------------
--
------ -
------ -
-------- -
- ------ ---- ------ ----- --
- ------ ---- ------ ----- --
- ------ ---- ------ ----- -
-
--
--
-------- -
--------------------- -
------------------- ----------
-
-
--
---------options
wepy-com-selectab 中，options 是必须的属性，它是一个数组，包含了每一个选项的 value 和 label：
-- -------------------- ---- -------
------ -
------ -
-------- -
- ------ ---- ------ ----- --
- ------ ---- ------ ----- --
- ------ ---- ------ ----- -
-
--
-默认值
如果您需要应用一个默认的选项，您只需要将该选项的 value 设置为初始的 value 即可：
-- -------------------- ---- -------
------ -
------ -
-------- -
- ------ ---- ------ ----- --
- ------ ---- ------ ----- --
- ------ ---- ------ ----- -
-
--
-
--------- -
-------------------------- ----------- ------
-多项选择
如果您需要选择多个选项，您只需要将组件的 multi 属性设置为 true：
<wepy-com-selectab :options="options" :multi="true"></wepy-com-selectab>
搜索
如果您需要搜索一个或多个选项，您只需要将组件的 search 属性设置为 true：
<wepy-com-selectab :options="options" :search="true"></wepy-com-selectab>
事件
wepy-com-selectab 提供了一些事件供您使用：
click(selected)：在选中选项后触发该事件。input(keywords)：输入搜索关键词时触发该事件。requestOptions(keywords)：在搜索时发生网络请求。
总结
wepy-com-selectab 提供了一种简便的方法来实现下拉选择框，能够在您的项目中快速、轻松地实现多选、单选、搜索等功能。我相信这个组件会对您的前端开发工作有所帮助，谢谢您的使用。
示例代码
-- -------------------- ---- -------
----------
------------------ ------------------ -----------------------------------------
-----------
--------
------ --------------- ---- --------------------
------ ------- -
----------- -
-------------------- ---------------
--
------ -
------ -
-------- -
- ------ ---- ------ ----- --
- ------ ---- ------ ----- --
- ------ ---- ------ ----- -
-
--
--
--------- -
-------------------------- ----------- ------
--
-------- -
--------------------- -
------------------- ----------
--
--------------------- -
-------------------- ----------
--
------------------------------ -
--------------- ------ ----------------------------------------
-
-
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005725b81e8991b448e8814