136 lines
3.0 KiB
Vue
136 lines
3.0 KiB
Vue
<template>
|
|
<view class="w-picker-view">
|
|
<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
|
|
<picker-view-column>
|
|
<view class="w-picker-item" v-for="(item, index) in range" :key="index">{{ item[nodeKey] }}</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
itemHeight: {
|
|
type: String,
|
|
default: '44px',
|
|
},
|
|
options: {
|
|
type: [Array, Object],
|
|
default() {
|
|
return []
|
|
},
|
|
},
|
|
value: {
|
|
type: [String, Array, Number],
|
|
default: '',
|
|
},
|
|
defaultType: {
|
|
type: String,
|
|
default: 'label',
|
|
},
|
|
defaultProps: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
label: 'label',
|
|
value: 'value',
|
|
}
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
pickVal: [],
|
|
}
|
|
},
|
|
computed: {
|
|
nodeKey() {
|
|
return this.defaultProps.label
|
|
},
|
|
nodeValue() {
|
|
return this.defaultProps.value
|
|
},
|
|
range() {
|
|
return this.options
|
|
},
|
|
},
|
|
watch: {
|
|
value(val) {
|
|
if (this.options.length != 0) {
|
|
this.initData()
|
|
}
|
|
},
|
|
options(val) {
|
|
this.initData()
|
|
},
|
|
},
|
|
created() {
|
|
if (this.options.length != 0) {
|
|
this.initData()
|
|
}
|
|
},
|
|
methods: {
|
|
initData() {
|
|
let dVal = this.value || ''
|
|
let data = this.range
|
|
let pickVal = [0]
|
|
let cur = null
|
|
let label = ''
|
|
let value, idx
|
|
if (this.defaultType == this.nodeValue) {
|
|
value = data.find((v) => v[this.nodeValue] == dVal)
|
|
idx = data.findIndex((v) => v[this.nodeValue] == dVal)
|
|
} else {
|
|
value = data.find((v) => v[this.nodeKey] == dVal)
|
|
idx = data.findIndex((v) => v[this.nodeKey] == dVal)
|
|
}
|
|
pickVal = [idx != -1 ? idx : 0]
|
|
this.$nextTick(() => {
|
|
this.pickVal = pickVal
|
|
})
|
|
if (data.length == 0) {
|
|
this.$emit('change', {
|
|
result: '',
|
|
value: '',
|
|
obj: { [this.nodeValue]: '', [this.nodeKey]: '' },
|
|
})
|
|
return
|
|
}
|
|
if (this.defaultType == this.nodeValue) {
|
|
this.$emit('change', {
|
|
result: value ? value[this.nodeKey] : data[0][this.nodeKey],
|
|
value: dVal || data[0][this.nodeKey],
|
|
obj: value ? value : data[0],
|
|
})
|
|
} else {
|
|
this.$emit('change', {
|
|
result: dVal || data[0][this.nodeKey],
|
|
value: value ? value[this.nodeValue] : data[0][this.nodeValue],
|
|
obj: value ? value : data[0],
|
|
})
|
|
}
|
|
},
|
|
handlerChange(e) {
|
|
let arr = [...e.detail.value]
|
|
let pickVal = [arr[0] || 0]
|
|
let data = this.range
|
|
let cur = data[arr[0]]
|
|
let label = ''
|
|
let value = ''
|
|
this.$nextTick(() => {
|
|
this.pickVal = pickVal
|
|
})
|
|
this.$emit('change', {
|
|
result: cur[this.nodeKey],
|
|
value: cur[this.nodeValue],
|
|
obj: cur,
|
|
})
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './w-picker.css';
|
|
</style>
|