mpvue-picker

preface

At the beginning of mpVUE open source, I wrote a small program with VUE and rewrote WEUI based on MPVue framework. At that time, the native components of small programs were used, without encapsulation and componentization. For today’s front-end development environment, componentization, modularization, engineering and automation have been a standard. And MPVue framework provides a very good component-based development platform, so the picker components in the small program package, so that it can use the mpVue development when the rapid implementation of picker function.

Why encapsulatepickercomponent

  • In fact, applets provide nativepickerComponent, but you’ll find what you see on android phones during developmentpickerEffect andWechat developer toolsPreview effect is different, actually just a little bit uglier…
  • Used in appletspickerThere are many places, very common.

use

  • The installation
NPM install mpvue-picker --save or CNPM install mpvue-picker --saveCopy the code
  • Use in pages
<template>
  <div class="mpvue-picer">
    <button @click="showPicker">test for mpvuePicker</button>
    <mpvue-picker ref="mpvuePicker" :pickerValueArray="pickerValueArray" :pickerValueDefault='pickerValueDefault' @pickerConfirm="pickerConfirm"></mpvue-picker>
  </div>
</template>

<script>
import mpvuePicker from 'mpvue-picker';
export default {
  components: {
    mpvuePicker
  },
  data() {
    return {
      pickerValueArray: ['Accommodation'.'Gift fee'.'Activity fee'.'Communication charges'.'subsidy'].pickerValueDefault: [1]}; },methods: {
    showPicker() {
      this.$refs.mpvuePicker.show();
    },
    pickerConfirm(e) {
      console.log(e); }}};</script>

<style>
</style>

Copy the code
  • Initialize the

Just call the show method in the mpvuePicker instance in the parent component.

Parameters that

mode

  • Picker component type
  • Type: String
  • Optional value:
    • Selector (single column)
    • multiSelector
    • multiLinkageSelector
  • Mandatory: No
  • Default: selector

pickerValueArray

  • Picker renders data
  • Type: Array
  • Optional value: –
  • Mandatory: Yes
  • Default value: –

pickerValueDefault

  • Picker is selected by default
  • Type: Array
  • Optional value: –
  • Mandatory: No
  • Default value: []

deepLength

  • Several levels of linkage
  • Type: Number
  • Optional value:
    • 2
    • 3
  • Mandatory: No
  • Default value: 2

onChange

  • Picer component scrolls back, returns the selected array index
  • Type: EventHandle
  • Optional value: –
  • Mandatory: No
  • Default value: –

onConfirm

  • Picer component callback when click OK, returns the selected array index
  • Type: EventHandle
  • Optional value: –
  • Mandatory: No
  • Default value: –

The effect

Description of related data structures

Single row

pickerValueArray: ['Accommodation'.'Gift fee'.'Activity fee'.'Communication charges'.'subsidy']
Copy the code

Multiple columns

pickerValueArray: [
  ['China'.'the United States'.'Japan'.'Russia'],
  ['tea'.'coffee'.'sushi'."Cheese"],
  ['the j20'.'F22'.'Autumn Moon'.'T50']]Copy the code
Click to expand the secondary linkage data structure 
pickerValueArray:
[
  {
    label: 'Air ticket'.value: 0.children: [{
      label: 'Economy class'.value: 1
    },
    {
      label: 'Business class'.value: 2}]}, {label: 'Train ticket'.value: 1.children: [{
      label: 'sleeping'.value: 1
    },
    {
      label: 'ticket'.value: 2
    },
    {
      label: 'I'.value: 3}]}, {label: 'Bus ticket'.value: 3.children: [{
      label: 'program'.value: 1
    },
    {
      label: 'ordinary'.value: 2}}]]Copy the code
Click to expand the three-level linkage data structure 
pickerValueArray:
[
  {
    label: 'phone'.value: 0.children: [{label: 'iphone'.value: 1.children: [{
          label: 'iphoneX'.value: 1
        },
        {
          label: 'iphone8'.value: 2
        }, {
          label: 'iphone8 Plus'.value: 3}]}, {label: 'android'.value: 1.children: [{label: 'vivo'.value: 1
          },
          {
            label: 'the meizu'.value: 2
          }, {
            label: 'millet'.value: 3}}]}, {label: 'PC'.value: 0.children: [{label: 'mac'.value: 1.children: [{label: 'macbook Pro'.value: 1
          },
          {
            label: 'iMac'.value: 2
          }, {
            label: 'mackbook'.value: 3
          }, {
            label: 'mackbook air'.value: 3}]}, {label: 'windows'.value: 1.children: [{label: 'dell'.value: 1
          },
          {
            label: 'surface'.value: 2
          }, {
            label: 'thinkpad'.value: 3}]}]Copy the code

Related instructions

For multi-level linkage, only second-level linkage and third-level linkage are supported because the picker column number is not dynamically added and its value is dynamically rendered.

TODO

  • Added time select mode
  • Added date selection mode
  • Added city selection mode

conclusion

Address mpvue – picker

Long march always feeling, give a star line ~