mpvue-picker
前言
在 mpvue開源之初寫了 用 vue 寫小程式，基於 mpvue 框架重寫 weui。當時用的是小程式的原生元件，沒有對其進行封裝和元件化。而對於現在的前端開發環境，元件化，模組化，工程化以及自動化已經是一種標配。而mpvue框架又提供了一個很好的元件化開發平臺，因此就對小程式中的 picker 元件進行封裝，使其在用mpvue開發的時候能夠用快速的實現 picker的功能。
為什麼封裝 picker 元件
- 其實小程式提供了原生的
picker元件，但是在開發的時候會發現在 android 手機上看到的picker效果與微信開發者工具預覽的效果不一樣，其實就是醜了一點點… - 在小程式中使用
picker的地方很多，很常見。
使用
- 安裝
npm install mpvue-picker --save 或者 cnpm install mpvue-picker --save
複製程式碼- 在頁面中使用
<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: [`住宿費`, `禮品費`, `活動費`, `通訊費`, `補助`],
pickerValueDefault: [1]
};
},
methods: {
showPicker() {
this.$refs.mpvuePicker.show();
},
pickerConfirm(e) {
console.log(e);
}
}
};
</script>
<style>
</style>
複製程式碼- 初始化
在父元件中呼叫 mpvuePicker 例項中的 show 方法即可。
引數說明
mode
- 說明：picker 元件型別
- 型別：String
- 可選值：
- selector（單列）
- multiSelector（多列）
- multiLinkageSelector（級聯）
- 是否必填： 否
- 預設值：selector
pickerValueArray
- 說明：picker 渲染資料
- 型別：Array
- 可選值：-
- 是否必填： 是
- 預設值：-
pickerValueDefault
- 說明：picker 預設選中值
- 型別：Array
- 可選值：-
- 是否必填： 否
- 預設值：[]
deepLength
- 說明：幾級聯動
- 型別：Number
- 可選值：
- 2
- 3
- 是否必填： 否
- 預設值：2
onChange
- 說明：picer 元件滾動時回撥，返回選中的陣列索引
- 型別：EventHandle
- 可選值：-
- 是否必填： 否
- 預設值：-
onConfirm
- 說明：picer 元件點選確定時回撥，返回選中的陣列索引
- 型別：EventHandle
- 可選值：-
- 是否必填： 否
- 預設值：-
效果
相關資料結構說明
單列
pickerValueArray: [`住宿費`, `禮品費`, `活動費`, `通訊費`, `補助`]
複製程式碼多列
pickerValueArray: [
[`中國`, `美國`, `日本`, `俄羅斯`],
[`茶`, `咖啡`, `壽司`, `乳酪`],
[`殲20`, `F22`, `秋月級`, `T50`]
]
複製程式碼點選展開二級聯動資料結構
pickerValueArray:
[
{
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
}
]
}
]
複製程式碼點選展開三級聯動資料結構
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: `魅族`,
value: 2
}, {
label: `小米`,
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
}
]
}
]
}
]
複製程式碼相關說明
對於多級聯動，由於沒有動態新增 picker 列數以及動態渲染其值，因此目前只支援 二級聯動和三級聯動。
TODO
- 增加時間選擇 mode
- 增加日期選擇 mode
- 增加城市選擇 mode
結束語
萬水千山總是情，給個 star 行不行~