480 lines
15 KiB
Vue
480 lines
15 KiB
Vue
|
<template>
|
||
|
|
<view class="mpvue-picker">
|
||
|
|
<view :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></view>
|
||
|
|
<view class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
|
||
|
|
<view class="mpvue-picker__hd" catchtouchmove="true">
|
||
|
|
<view class="mpvue-picker__action" @click="pickerCancel">{{$t('MN_F_31')}}</view>
|
||
|
|
<view class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">{{$t('MN_F_32')}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 单列 -->
|
||
|
|
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue"
|
||
|
|
@change="pickerChange" v-if="mode==='selector' && pickerValueSingleArray.length > 0">
|
||
|
|
<block>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueSingleArray" :key="index">
|
||
|
|
{{item.label}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
</block>
|
||
|
|
</picker-view>
|
||
|
|
<!-- 时间选择器 -->
|
||
|
|
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue"
|
||
|
|
@change="pickerChange" v-if="mode==='timeSelector'">
|
||
|
|
<block>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueHour" :key="index">{{item.label}}
|
||
|
|
</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueMinute" :key="index">{{item.label}}
|
||
|
|
</view>
|
||
|
|
</picker-view-column>
|
||
|
|
</block>
|
||
|
|
</picker-view>
|
||
|
|
<!-- 多列选择 -->
|
||
|
|
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue"
|
||
|
|
@change="pickerChange" v-if="mode==='multiSelector'">
|
||
|
|
<block v-for="(n,index) in pickerValueMulArray.length" :key="index">
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index1) in pickerValueMulArray[n]" :key="index1">
|
||
|
|
{{item.label}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
</block>
|
||
|
|
</picker-view>
|
||
|
|
<!-- 二级联动 -->
|
||
|
|
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue"
|
||
|
|
@change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===2">
|
||
|
|
<block>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueMulTwoOne" :key="index">
|
||
|
|
{{item.label}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueMulTwoTwo" :key="index">
|
||
|
|
{{item.label}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
</block>
|
||
|
|
</picker-view>
|
||
|
|
<!-- 三级联动 -->
|
||
|
|
<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue"
|
||
|
|
@change="pickerChangeMul" v-if="mode==='multiLinkageSelector' && deepLength===3">
|
||
|
|
<block>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueMulThreeOne" :key="index">
|
||
|
|
{{item.label}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueMulThreeTwo" :key="index">
|
||
|
|
{{item.label}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
<picker-view-column>
|
||
|
|
<view class="picker-item" v-for="(item,index) in pickerValueMulThreeThree" :key="index">
|
||
|
|
{{item.label}}</view>
|
||
|
|
</picker-view-column>
|
||
|
|
</block>
|
||
|
|
</picker-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
pickerChangeValue: [],
|
||
|
|
pickerValue: [],
|
||
|
|
pickerValueArrayChange: true,
|
||
|
|
modeChange: false,
|
||
|
|
pickerValueSingleArray: [],
|
||
|
|
pickerValueHour: [],
|
||
|
|
pickerValueMinute: [],
|
||
|
|
pickerValueMulArray: [],
|
||
|
|
pickerValueMulTwoOne: [],
|
||
|
|
pickerValueMulTwoTwo: [],
|
||
|
|
pickerValueMulThreeOne: [],
|
||
|
|
pickerValueMulThreeTwo: [],
|
||
|
|
pickerValueMulThreeThree: [],
|
||
|
|
/* 是否显示控件 */
|
||
|
|
showPicker: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
/* mode */
|
||
|
|
mode: {
|
||
|
|
type: String,
|
||
|
|
default: 'selector'
|
||
|
|
},
|
||
|
|
/* picker 数值 */
|
||
|
|
pickerValueArray: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/* 默认值 */
|
||
|
|
pickerValueDefault: {
|
||
|
|
type: Array,
|
||
|
|
default () {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/* 几级联动 */
|
||
|
|
deepLength: {
|
||
|
|
type: Number,
|
||
|
|
default: 2
|
||
|
|
},
|
||
|
|
/* 主题色 */
|
||
|
|
themeColor: String
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
pickerValueArray(oldVal, newVal) {
|
||
|
|
this.pickerValueArrayChange = true;
|
||
|
|
},
|
||
|
|
mode(oldVal, newVal) {
|
||
|
|
this.modeChange = true;
|
||
|
|
},
|
||
|
|
pickerValueArray(val) {
|
||
|
|
this.initPicker(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initPicker(valueArray) {
|
||
|
|
let pickerValueArray = valueArray;
|
||
|
|
this.pickerValue = this.pickerValueDefault;
|
||
|
|
// 初始化多级联动
|
||
|
|
if (this.mode === 'selector') {
|
||
|
|
this.pickerValueSingleArray = valueArray;
|
||
|
|
} else if (this.mode === 'timeSelector') {
|
||
|
|
this.modeChange = false;
|
||
|
|
let hourArray = [];
|
||
|
|
let minuteArray = [];
|
||
|
|
for (let i = 0; i < 24; i++) {
|
||
|
|
hourArray.push({
|
||
|
|
value: i,
|
||
|
|
label: i > 9 ? `${i} ` + this.$t('S_L_7') + : `0${i} ` + this.$t('S_L_7')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
for (let i = 0; i < 60; i++) {
|
||
|
|
minuteArray.push({
|
||
|
|
value: i,
|
||
|
|
label: i > 9 ? `${i}` + this.$t('S_L_8') : `0${i}` + this.$t('S_L_8')
|
||
|
|
});
|
||
|
|
}
|
||
|
|
this.pickerValueHour = hourArray;
|
||
|
|
this.pickerValueMinute = minuteArray;
|
||
|
|
} else if (this.mode === 'multiSelector') {
|
||
|
|
this.pickerValueMulArray = valueArray;
|
||
|
|
} else if (this.mode === 'multiLinkageSelector' && this.deepLength === 2) {
|
||
|
|
// 两级联动
|
||
|
|
let pickerValueMulTwoOne = [];
|
||
|
|
let pickerValueMulTwoTwo = [];
|
||
|
|
// 第一列
|
||
|
|
for (let i = 0, length = pickerValueArray.length; i < length; i++) {
|
||
|
|
pickerValueMulTwoOne.push(pickerValueArray[i]);
|
||
|
|
}
|
||
|
|
// 渲染第二列
|
||
|
|
// 如果有设定的默认值
|
||
|
|
if (this.pickerValueDefault.length === 2) {
|
||
|
|
let num = this.pickerValueDefault[0];
|
||
|
|
for (
|
||
|
|
let i = 0, length = pickerValueArray[num].children.length; i < length; i++
|
||
|
|
) {
|
||
|
|
pickerValueMulTwoTwo.push(pickerValueArray[num].children[i]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
for (
|
||
|
|
let i = 0, length = pickerValueArray[0].children.length; i < length; i++
|
||
|
|
) {
|
||
|
|
pickerValueMulTwoTwo.push(pickerValueArray[0].children[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.pickerValueMulTwoOne = pickerValueMulTwoOne;
|
||
|
|
this.pickerValueMulTwoTwo = pickerValueMulTwoTwo;
|
||
|
|
} else if (
|
||
|
|
this.mode === 'multiLinkageSelector' &&
|
||
|
|
this.deepLength === 3
|
||
|
|
) {
|
||
|
|
let pickerValueMulThreeOne = [];
|
||
|
|
let pickerValueMulThreeTwo = [];
|
||
|
|
let pickerValueMulThreeThree = [];
|
||
|
|
// 第一列
|
||
|
|
for (let i = 0, length = pickerValueArray.length; i < length; i++) {
|
||
|
|
pickerValueMulThreeOne.push(pickerValueArray[i]);
|
||
|
|
}
|
||
|
|
// 渲染第二列
|
||
|
|
this.pickerValueDefault =
|
||
|
|
this.pickerValueDefault.length === 3 ?
|
||
|
|
this.pickerValueDefault : [0, 0, 0];
|
||
|
|
if (this.pickerValueDefault.length === 3) {
|
||
|
|
let num = this.pickerValueDefault[0];
|
||
|
|
for (
|
||
|
|
let i = 0, length = pickerValueArray[num].children.length; i < length; i++
|
||
|
|
) {
|
||
|
|
pickerValueMulThreeTwo.push(pickerValueArray[num].children[i]);
|
||
|
|
}
|
||
|
|
// 第三列
|
||
|
|
let numSecond = this.pickerValueDefault[1];
|
||
|
|
for (let i = 0, length = pickerValueArray[num].children[numSecond].children.length; i <
|
||
|
|
length; i++) {
|
||
|
|
pickerValueMulThreeThree.push(
|
||
|
|
pickerValueArray[num].children[numSecond].children[i]
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.pickerValueMulThreeOne = pickerValueMulThreeOne;
|
||
|
|
this.pickerValueMulThreeTwo = pickerValueMulThreeTwo;
|
||
|
|
this.pickerValueMulThreeThree = pickerValueMulThreeThree;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
show() {
|
||
|
|
setTimeout(() => {
|
||
|
|
if (this.pickerValueArrayChange || this.modeChange) {
|
||
|
|
this.initPicker(this.pickerValueArray);
|
||
|
|
this.showPicker = true;
|
||
|
|
this.pickerValueArrayChange = false;
|
||
|
|
this.modeChange = false;
|
||
|
|
} else {
|
||
|
|
this.showPicker = true;
|
||
|
|
}
|
||
|
|
}, 0);
|
||
|
|
},
|
||
|
|
maskClick() {
|
||
|
|
this.pickerCancel();
|
||
|
|
},
|
||
|
|
pickerCancel() {
|
||
|
|
this.showPicker = false;
|
||
|
|
this._initPickerVale();
|
||
|
|
let pickObj = {
|
||
|
|
index: this.pickerValue,
|
||
|
|
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
|
||
|
|
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
|
||
|
|
};
|
||
|
|
this.$emit('onCancel', pickObj);
|
||
|
|
},
|
||
|
|
pickerConfirm(e) {
|
||
|
|
this.showPicker = false;
|
||
|
|
this._initPickerVale();
|
||
|
|
let pickObj = {
|
||
|
|
index: this.pickerValue,
|
||
|
|
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
|
||
|
|
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
|
||
|
|
};
|
||
|
|
this.$emit('onConfirm', pickObj);
|
||
|
|
},
|
||
|
|
showPickerView() {
|
||
|
|
this.showPicker = true;
|
||
|
|
},
|
||
|
|
pickerChange(e) {
|
||
|
|
this.pickerValue = e.mp.detail.value;
|
||
|
|
let pickObj = {
|
||
|
|
index: this.pickerValue,
|
||
|
|
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
|
||
|
|
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
|
||
|
|
};
|
||
|
|
this.$emit('onChange', pickObj);
|
||
|
|
},
|
||
|
|
pickerChangeMul(e) {
|
||
|
|
if (this.deepLength === 2) {
|
||
|
|
let pickerValueArray = this.pickerValueArray;
|
||
|
|
let changeValue = e.mp.detail.value;
|
||
|
|
// 处理第一列滚动
|
||
|
|
if (changeValue[0] !== this.pickerValue[0]) {
|
||
|
|
let pickerValueMulTwoTwo = [];
|
||
|
|
// 第一列滚动第二列数据更新
|
||
|
|
for (let i = 0, length = pickerValueArray[changeValue[0]].children.length; i < length; i++) {
|
||
|
|
pickerValueMulTwoTwo.push(pickerValueArray[changeValue[0]].children[i]);
|
||
|
|
}
|
||
|
|
this.pickerValueMulTwoTwo = pickerValueMulTwoTwo;
|
||
|
|
// 第二列初始化为 0
|
||
|
|
changeValue[1] = 0;
|
||
|
|
}
|
||
|
|
this.pickerValue = changeValue;
|
||
|
|
} else if (this.deepLength === 3) {
|
||
|
|
let pickerValueArray = this.pickerValueArray;
|
||
|
|
let changeValue = e.mp.detail.value;
|
||
|
|
let pickerValueMulThreeTwo = [];
|
||
|
|
let pickerValueMulThreeThree = [];
|
||
|
|
// 重新渲染第二列
|
||
|
|
// 如果是第一列滚动
|
||
|
|
if (changeValue[0] !== this.pickerValue[0]) {
|
||
|
|
this.pickerValueMulThreeTwo = [];
|
||
|
|
for (let i = 0, length = pickerValueArray[changeValue[0]].children.length; i < length; i++) {
|
||
|
|
pickerValueMulThreeTwo.push(pickerValueArray[changeValue[0]].children[i]);
|
||
|
|
}
|
||
|
|
// 重新渲染第三列
|
||
|
|
for (let i = 0, length = pickerValueArray[changeValue[0]].children[0].children.length; i <
|
||
|
|
length; i++) {
|
||
|
|
pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[0].children[i]);
|
||
|
|
}
|
||
|
|
changeValue[1] = 0;
|
||
|
|
changeValue[2] = 0;
|
||
|
|
this.pickerValueMulThreeTwo = pickerValueMulThreeTwo;
|
||
|
|
this.pickerValueMulThreeThree = pickerValueMulThreeThree;
|
||
|
|
} else if (changeValue[1] !== this.pickerValue[1]) {
|
||
|
|
// 第二列滚动
|
||
|
|
// 重新渲染第三列
|
||
|
|
this.pickerValueMulThreeThree = [];
|
||
|
|
pickerValueMulThreeTwo = this.pickerValueMulThreeTwo;
|
||
|
|
for (let i = 0, length = pickerValueArray[changeValue[0]].children[changeValue[1]].children
|
||
|
|
.length; i <
|
||
|
|
length; i++) {
|
||
|
|
pickerValueMulThreeThree.push(pickerValueArray[changeValue[0]].children[changeValue[1]]
|
||
|
|
.children[
|
||
|
|
i]);
|
||
|
|
}
|
||
|
|
changeValue[2] = 0;
|
||
|
|
this.pickerValueMulThreeThree = pickerValueMulThreeThree;
|
||
|
|
}
|
||
|
|
this.pickerValue = changeValue;
|
||
|
|
}
|
||
|
|
let pickObj = {
|
||
|
|
index: this.pickerValue,
|
||
|
|
value: this._getPickerLabelAndValue(this.pickerValue, this.mode).value,
|
||
|
|
label: this._getPickerLabelAndValue(this.pickerValue, this.mode).label
|
||
|
|
};
|
||
|
|
this.$emit('onChange', pickObj);
|
||
|
|
},
|
||
|
|
// 获取 pxikerLabel
|
||
|
|
_getPickerLabelAndValue(value, mode) {
|
||
|
|
let pickerLable;
|
||
|
|
let pickerGetValue = [];
|
||
|
|
// selector
|
||
|
|
if (mode === 'selector') {
|
||
|
|
pickerLable = this.pickerValueSingleArray[value].label;
|
||
|
|
pickerGetValue.push(this.pickerValueSingleArray[value].value);
|
||
|
|
} else if (mode === 'timeSelector') {
|
||
|
|
pickerLable = `${this.pickerValueHour[value[0]].label}-${this.pickerValueMinute[value[1]].label}`;
|
||
|
|
pickerGetValue.push(this.pickerValueHour[value[0]].value);
|
||
|
|
pickerGetValue.push(this.pickerValueHour[value[1]].value);
|
||
|
|
} else if (mode === 'multiSelector') {
|
||
|
|
for (let i = 0; i < value.length; i++) {
|
||
|
|
if (i > 0) {
|
||
|
|
pickerLable += this.pickerValueMulArray[i][value[i]].label + (i === value.length - 1 ? '' :
|
||
|
|
'-');
|
||
|
|
} else {
|
||
|
|
pickerLable = this.pickerValueMulArray[i][value[i]].label + '-';
|
||
|
|
}
|
||
|
|
pickerGetValue.push(this.pickerValueMulArray[i][value[i]].value);
|
||
|
|
}
|
||
|
|
} else if (mode === 'multiLinkageSelector') {
|
||
|
|
/* eslint-disable indent */
|
||
|
|
pickerLable =
|
||
|
|
this.deepLength === 2 ?
|
||
|
|
`${this.pickerValueMulTwoOne[value[0]].label}-${this.pickerValueMulTwoTwo[value[1]].label}` :
|
||
|
|
`${this.pickerValueMulThreeOne[value[0]].label}-${this.pickerValueMulThreeTwo[value[1]].label}-${this.pickerValueMulThreeThree[value[2]].label}`;
|
||
|
|
if (this.deepLength === 2) {
|
||
|
|
pickerGetValue.push(this.pickerValueMulTwoOne[value[0]].value);
|
||
|
|
pickerGetValue.push(this.pickerValueMulTwoTwo[value[1]].value);
|
||
|
|
} else {
|
||
|
|
pickerGetValue.push(this.pickerValueMulThreeOne[value[0]].value);
|
||
|
|
pickerGetValue.push(this.pickerValueMulThreeTwo[value[1]].value);
|
||
|
|
pickerGetValue.push(this.pickerValueMulThreeThree[value[2]].value);
|
||
|
|
}
|
||
|
|
/* eslint-enable indent */
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
label: pickerLable,
|
||
|
|
value: pickerGetValue
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// 初始化 pickerValue 默认值
|
||
|
|
_initPickerVale() {
|
||
|
|
if (this.pickerValue.length === 0) {
|
||
|
|
if (this.mode === 'selector') {
|
||
|
|
this.pickerValue = [0];
|
||
|
|
} else if (this.mode === 'multiSelector') {
|
||
|
|
this.pickerValue = new Int8Array(this.pickerValueArray.length);
|
||
|
|
} else if (
|
||
|
|
this.mode === 'multiLinkageSelector' &&
|
||
|
|
this.deepLength === 2
|
||
|
|
) {
|
||
|
|
this.pickerValue = [0, 0];
|
||
|
|
} else if (
|
||
|
|
this.mode === 'multiLinkageSelector' &&
|
||
|
|
this.deepLength === 3
|
||
|
|
) {
|
||
|
|
this.pickerValue = [0, 0, 0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.pickerMask {
|
||
|
|
position: fixed;
|
||
|
|
z-index: 1000;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.6);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker-content {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
transform: translateY(100%);
|
||
|
|
z-index: 3000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker-view-show {
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker__hd {
|
||
|
|
display: flex;
|
||
|
|
padding: 9px 15px;
|
||
|
|
background-color: #fff;
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 17px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker__hd:after {
|
||
|
|
content: ' ';
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 1px;
|
||
|
|
border-bottom: 1px solid #e5e5e5;
|
||
|
|
color: #e5e5e5;
|
||
|
|
transform-origin: 0 100%;
|
||
|
|
transform: scaleY(0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker__action {
|
||
|
|
display: block;
|
||
|
|
flex: 1;
|
||
|
|
color: #fb3024;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker__action:first-child {
|
||
|
|
text-align: left;
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker__action:last-child {
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.picker-item {
|
||
|
|
text-align: center;
|
||
|
|
line-height: 40px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mpvue-picker-view {
|
||
|
|
position: relative;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 238px;
|
||
|
|
background-color: rgba(255, 255, 255, 1);
|
||
|
|
}
|
||
|
|
</style>
|