mpvue 的 picker 类似移动端的select

前言

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

为什么封装 `picker` 组件

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

使用

安装

npm install mpvue-picker --save

在页面中使用

<template>
  <div class="mpvue-picer">
    <button @click="showPicker">test for mpvuePicker</button>
    <mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
  </div>
</template>

<script>
import mpvuePicker from 'mpvue-picker';
export default {
  components: {
    mpvuePicker
  },
  data() {
    return {
      mode: 'selector',
      pickerValueArray: [
        {
          label: '住宿费',
          value: 1
        },
        {
          label: '活动费',
          value: 2
        },
        {
          label: '通讯费',
          value: 3
        },
        {
          label: '补助',
          value: 4
        }
      ],
      pickerValueDefault: [1]
    };
  },
  methods: {
    showPicker() {
      this.$refs.mpvuePicker.show();
    },
    onConfirm(e) {
      console.log(e);
    },
    onChange(e) {
      console.log(e);
    },
    onCancel(e) {
      console.log(e);
    }
  }
};
</script>

<style>

</style>

更多 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
可选值：
- 2
- 3
是否必填：否
默认值：2

themeColor

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

onChange

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

onConfirm

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

onCancel

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