<script setup> import { ref } from 'vue' const props = defineProps({ value: { type: [Number, String] }, columns: { type: Array, default: () => [] }, label: { type: String, default: '' }, required: { type: Boolean, default: false }, placeholder: { type: String, default: '请选择' }, disabled: { type: Boolean, default: false } }) const emit = defineEmits(['update:value', 'change']) const show = ref(false) const onConfirm = (value) => { show.value = false emit('update:value', value.value) emit('change', value) } const displayText = computed(() => { const selected = props.columns.find(x => x.value === props.value) return selected?.text || '' }) const reset = () => { emit('update:value', undefined) } defineExpose({ reset }) </script> <template> <div> <van-field :model-value="displayText" @click="show = true" readonly :disabled="disabled" :required="required" :placeholder="placeholder" :label="label" class="mb-10px" is-link /> <van-popup v-model:show="show" destroy-on-close position="bottom" safe-area-inset-bottom > <van-picker :columns="columns" @confirm="onConfirm" @cancel="show = false" :default-index="columns.findIndex(x => x.value === value)" title="请选择" confirm-button-text="确定" cancel-button-text="取消" /> </van-popup> </div> </template>