基于 mpvue 框架的小程序选择控件，支持单列，多列，联动。（基于英语）

基于 mpvue 框架的小程序选择控件，支持单列，多列，联动。（基于英语）

mpvue-picker

基于 mpvue 框架的小程序选择控件

支持单列、多列以及级联

前言

在 mpvue开源之初写了 用 vue 写小程序，基于 mpvue 框架重写 weui。当时用的是小程序的原生组件，没有对其进行封装和组件化。而对于现在的前端开发环境，组件化，模块化，工程化以及自动化已经是一种标配。而mpvue框架又提供了一个很好的组件化开发平台，因此就对小程序中的 picker 组件进行封装，使其在用mpvue开发的时候能够用快速的实现 picker的功能。

⚠️ uni-app 插件市场的 mpvue-picker 不是本人在维护，如果要在 uni-app 中使用的话推荐通过 npm 包的方式引入。

为什么封装 picker 组件

其实小程序提供了原生的 picker 组件，但是在开发的时候会发现在 android 手机上看到的 picker效果与微信开发者工具预览的效果不一样，其实就是丑了一点点... 在小程序中使用 picker 的地方很多，很常见。

使用

安装

npm install mpvue-picker --save

在页面中使用

更多 demo初始化

在父组件中调用 mpvuePicker 实例中的 show 方法即可

this.$refs.mpvuePicker.show();

效果

参数说明

mode

说明：picker 组件类型类型：String可选值： selector（单列）timeSelector（时间选择）dateSelector (日期选择)multiSelector（多列）multiLinkageSelector（级联） 是否必填： 否默认值：selector

pickerValueArray

说明：picker 渲染数据类型：Array可选值：-是否必填： 是（当 mode 值为 timeSelector 不用填）默认值：-

pickerValueDefault

说明：picker 默认选中值类型：Array || Date （类型为 Date 仅限 mode 为 dateSelector 的情形）可选值：-是否必填： 否 (当同一个组件使用多种 mode 来回切换使用时 pickerValueDefault 必填)默认值：[]相关说明：如果 mode 为 dateSelector，默认值为当前日期，初始值支持 Date 对象或者数组，以 2019-4-5 为例，new Date('2019-04-05') 和 [2019, 4, 5] 均可以

deepLength

说明：几级联动类型：Number可选值： 23 是否必填： 否默认值：2

themeColor

说明：主题颜色类型：Color是否必填： 否默认值：#1aad19

onChange

说明：picker 组件滚动时回调，返回选中的 label, value 和数组索引 index 的值类型：EventHandle可选值：-是否必填： 否默认值：-

onConfirm

onCancel

相关数据结构说明

单列

多列

二级联动

三级联动

相关说明

对于多级联动，由于没有动态添加 picker 列数以及动态渲染其值，因此目前只支持 二级联动和三级联动。

版本日志

version logs

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。