基於 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