56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<picker @change="ok" range-key="text" mode="selector" :value="index" :range="option">
|
|
<click-input :value="_value ? option[index].text : null" :placeholder="placeholder" />
|
|
</picker>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import ClickInput from '@/components/ClickInput.vue'
|
|
|
|
const props = defineProps({
|
|
options: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择'
|
|
},
|
|
valueKey: String,
|
|
labelKey: String,
|
|
modelValue: String
|
|
})
|
|
|
|
const option = computed(() => {
|
|
return props.options.map(v => {
|
|
return {
|
|
text: props.labelKey ? v[props.labelKey] : v,
|
|
value: props.valueKey ? v[props.valueKey] : v
|
|
}
|
|
})
|
|
})
|
|
|
|
const index = ref(0)
|
|
|
|
const _value = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(val) {
|
|
emits('update:modelValue', val)
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(['update:modelValue'])
|
|
|
|
function ok(e) {
|
|
index.value = e.detail.value
|
|
_value.value = option.value[index.value].value
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style> |