You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
802 B
Vue
35 lines
802 B
Vue
1 week ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<picker mode="selector" @change="onChange" :range-key="key||'label'" :value="valueIndex" :range="data">
|
||
|
|
<view class="picker">
|
||
|
|
{{(data.find(e=>e.value == value)||{}).label}}
|
||
|
|
</view>
|
||
|
|
</picker>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
computed,
|
||
|
|
} from 'vue'
|
||
|
|
const props = defineProps(['key', 'value', 'data'])
|
||
|
|
const emit = defineEmits(['change'])
|
||
|
|
const onChange = (val) => {
|
||
|
|
let data = props.data?.[val.detail.value]?.value || ''
|
||
|
|
emit('change', data)
|
||
|
|
}
|
||
|
|
const valueIndex = computed(() => {
|
||
|
|
if (!props.data) return 0
|
||
|
|
const index = props.data.findIndex(e => e.value === props.value)
|
||
|
|
return index >= 0 ? index : 0
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.picker {
|
||
|
|
height: 50rpx;
|
||
|
|
line-height: 50rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
</style>
|