前言
在前端开发中，我们经常需要使用到日期-picker、城市-picker等选择器。市面上也有很多不错的插件，但是大多数插件都有样式问题，而且很难定制。而 better-picker 就是一个非常不错的选择。
下面将详细介绍如何使用 better-picker，并带有示例代码。让我们一起来看看吧！
安装 better-picker
使用 npm 安装 better-picker 只需要一行命令。
npm install better-picker --save
better-picker 的安装也可以直接通过引入官方的 CDN 地址来完成。在 HTML 中添加如下代码即可。
<script src="https://cdn.jsdelivr.net/npm/better-picker/dist/better-picker.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/better-picker/dist/better-picker.min.css" />
使用 better-picker
基础使用
better-picker 的基础使用非常简单。只需要使用 new Picker() 创建实例，然后设置相应的参数即可。
-- -------------------- ---- -------
-- -------
--- ---------- - --- --------
----- ---------- -------- --------- ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------- ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ --------
------ -------
-------------- --- -- ---
--------------- -------- --- -
---------------
-
---
-- -------
------------------运行上面的代码，你将会看到一个非常好看的日期选择器。如果你想创建自己想要的选择器，只需要稍作修改即可。
设置默认值
设置 selectedIndex 可以设置 picker 的默认值。
-- -------------------- ---- -------
-- -------
--- ---------- - --- --------
----- ---------- -------- --------- ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------- ------- ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ ------ --------
------ -------
-------------- --- -- ---
--------------- -------- --- -
---------------
-
---
-- -------
------------------上面的代码将默认选择 2023年，01月，01日。
字符串数据源
更改 data 参数就可以使用字符串作为 picker 的数据源。
-- -------------------- ---- -------
-- -------
--- ---------- - --- --------
----- ----- ---- -----
------ -----
-------------- --
--------------- -------- --- -
---------------
-
---
-- -------
------------------上面的代码将生成一个只有 A、B、C 三个选项的选择器。
级联选择器
更改 data 参数就可以创建级联 picker。
-- -------------------- ---- -------
-- -------
--- ------------- - --- --------
----- -
-
--- -----------
----- -----
--------- -
-
--- ---------
----- -------
--------- -
-
--- ----------
----- ----------
--
-
--- -------
----- -----------
-
-
--
-
--- ----------
----- ------
--------- -
-
--- --------
----- ---------
--
-
--- --------
----- ----------
-
-
-
-
--
-
--- ----------
----- -----
--------- -
-
--- -----------
----- ------
--------- -
-
--- ------
----- ---------
--
-
--- ---------
----- ------
-
-
--
-
--- ----------
----- ------
--------- -
-
--- -----------
----- ------
--
-
--- ------------
----- ------------
-
-
-
-
-
--
------ -------
-------------- --------
--------------- -------- --- -
---------------
-
---
-- -------
---------------------
上面的代码将生成一个级联 picker，包含了省、市、区三级数据。
总结
better-picker 是一个非常不错的选择器插件，它既简单易用，又有很多的定制化选项。在使用的过程中，我们需要学习如何设置参数、设置默认值、设置数据源等等。
我希望这篇使用教程能够对大家有所帮助，让你们对 better-picker 有一个更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005556181e8991b448d2941