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