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

最近在学着写mpvue小程序，在做选择控件时候遇到了点问题，按照微信小程序方法picker，很不方便！

在网上搜到一个很好用的组件下面给大家分享：

组件说明文档链接：https://go.ctolib.com/article/wiki/84754

我想说的是：按照说明文档并不能实现picker，后来幸运的是，作者有一个

源码链接：https://github.com/MPComponent/mpvue-picker

通过读源码，最后实现了picker

我用的是二级联动：

方法是：

首先：

安装 mpvue-picker

npm install mpvue-picker --save

然后页面代码为：

<template>
      <div class="time-box male">
        <mpvue-picker class="time-box male" :mode="mode" :deepLength=deepLength ref="mpvuePicker" :pickerValueArray="pickerValueArray" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></mpvue-picker>
        <div class="time-box" @click="showPicker">
          <image class="time-img" src='../../static/images/newest/time.png'/>
          <text class="time-text">按期查询</text>
        </div>
      </div>
</template>

<script>

import mpvuePicker from "mpvue-picker";

export default {
  components: {
    mpvuePicker
  },
  data() {
    return {
      allBulletin: [],
      mode: 'selector',
      deepLength: 0, // 几级联动
      pickerValueDefault: [], // 初始化值
      pickerValueArray: [], // picker 数组值
      pickerText: '',
      mulLinkageTwoPicker: [
        {
          label: '飞机',
          value: 0,
          children: [
            {
              label: '经济舱',
              value: 1
            },
            {
              label: '商务舱',
              value: 2
            }
          ]
        },
        {
          label: '火车票',
          value: 1,
          children: [
            {
              label: '卧铺',
              value: 1
            },
            {
              label: '坐票',
              value: 2
            },
            {
              label: '站票',
              value: 3
            }
          ]
        },
        {
          label: '汽车票',
          value: 3,
          children: [
            {
              label: '快班',
              value: 1
            },
            {
              label: '普通',
              value: 2
            }
          ]
        }
      ],
      pickerValueDefault: [0,0]
    };
  },
  onLoad() {
    var newest = String(this.$mp.query.type);
    this.$http
      .post(
        "https://tashimall.miniprogram.weixin-api-test.yokead.com/bulletin/getBulletin.json",
        "type=" + newest
      )
      .then(res => {
        //输出请求数据
        this.allBulletin = res.data.data;
      })
      .catch(err => {
        console.log(err.status, err.message);
      });
  },
  methods: {
    showPicker() {
      this.pickerValueArray = this.mulLinkageTwoPicker;
      this.mode = 'multiLinkageSelector';
      this.deepLength = 2;
      this.pickerValueDefault = [1, 0];
      this.$refs.mpvuePicker.show();
      console.log(this);
    },
    onConfirm(e) {
      console.log(e);
    }
  }
};
</script>

<style>
.time-box {
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  width: 210rpx;
  height: 64rpx;
  background: #ff8308;
  border-radius: 15rpx;
}
.male {
  margin-left: 22rpx;
}
.time-img {
  width: 36rpx;
  height: 36rpx;
}
.time-text {
  font-size: 28rpx;
  color: #fff;
  margin-left: 10rpx;
}
</style>

需要注意的是：如果你是其他（单列，多列，二级联动，三级联动）中的任意一种，务必看源码。

地址是：

https://github.com/MPComponent/mpvue-picker