在前端开发中，如何开发交互良好，用户体验优秀的移动端组件是一个不可避免的问题。本文介绍了一款开箱即用的移动端选择器组件 npm 包 react-mobile-picker-wheel，能够快速实现各种类型的移动端选择器，如日期选择器、时间选择器、地区选择器等。
安装
使用 npm 安装 react-mobile-picker-wheel：
npm install react-mobile-picker-wheel --save
使用
基础使用
在 react 组件中引入 react-mobile-picker-wheel：
-- -------------------- ---- -------
------ ------ ---- ----------------------------
-------
-------
- --- ---- ------ ---- --
- --- ---- ------ ---- --
- --- ---- ------ ---- --
- --- ---- ------ ---- --
--
--------------- --- ---- ------ ---- --
------------ --- ----- -- -- -
---------------- -- -- -- ----
------------------- -- -------
--
---日期选择器
-- -------------------- ---- -------
------ ------ ---- ----------------------------
----- ----- - --- ----------
--------- ---------------------
----------- ------ -- -
------ -
--- ------
------ ---- - ----- - - ---
--
---
----- ------ - --- ---------------------------- ------ -- -
------ - --- ----- - -- ------ ------ - ------------------------- ---- - - -- --
---
----- ---- - --- ---------------------------- ------ -- -
------ - --- ----- - -- ------ ------ - ------------------------- ---- - - -- --
---
-------
----------- -
------------- ------- ------
---------------
- --- --- ------ ----- -- --
- --- -- ------ --- -- --
- --- -- ------ --- -- --
--
-------------------- -- -
----------------------
--
---时间选择器
-- -------------------- ---- -------
------ ------ ---- ----------------------------
----- ----- - --- ---------------------------- ------ -- -
------ - --- ------ ------ ---------------------------- ---- - - -- --
---
----- ------- - --- ---------------------------- ------ -- -
------ - --- ----- - -- ------ ------ - ------------------------- ---- - - -- --
---
-------
----------- -
------------- ---------
---------------- --- -- ------ --- -- -- - --- -- ------ --- -- ---
-------------------- -- -
----------------------
--
---地区选择器
-- -------------------- ---- -------
------ ------ ---- ----------------------------
----- ----- - -
-
--- ----
------ -----
--------- -
- --- ---- ------ ----- --
- --- ---- ------ ----- --
- --- ---- ------ ----- --
- --- ---- ------ ----- --
--
--
-
--- ----
------ -----
--------- -
- --- ---- ------ ----- --
- --- ---- ------ ----- --
- --- ---- ------ ----- --
- --- ----- ------ ----- --
--
--
-
--- -----
------ ------
--------- -
-
--- -----
------ ------
--------- -
- --- ------- ------ ----- --
- --- ------- ------ ----- --
--
--
-
--- -----
------ ------
--------- -
- --- ------- ------ ----- --
- --- ------- ------ ----- --
--
--
--
--
--
-------
------------
---------------- --- ---- ------ ---- -- - --- ---- ------ ----- ---
-------------------- -- -
----------------------
--
---参数说明
| 参数名 | 类型 | 描述 |
|---|---|---|
| data | Array | 选择器的数据源 |
| defaultValue | Array/Object | 选择器的默认值 |
| onChange | Function | 选择器值发生改变事件 |
| separator | String | 选择器不同选项的分隔符 |
结语
react-mobile-picker-wheel 是一款非常适合前端开发的移动端选择器组件。从基础的使用到高级的用法，对于前端开发者来说是一个不可多得的简单易用的组件库。希望本篇文章能为广大前端工程师的开发工作提供一些指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea881e8991b448e771e