<script setup> import { ref } from 'vue' const props = defineProps({ modelValue: { 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:modelValue', 'change']) const show = ref(false) const onConfirm = (value) => { show.value = false emit('update:modelValue', value.selectedValues?.[0]) emit('change', value.selectedValues?.[0]) } const displayText = computed(() => { const selected = props.columns.find(x => x.value === props.modelValue) return selected?.text || '' }) </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" teleport="#__nuxt" 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>