<script setup> import { ref } from 'vue' import { useI18n } from 'vue-i18n' const {t} =useI18n() const props = defineProps({ modelValue: { type: [Number, String] }, columns: { type: Array, default: () => [] }, label: { type: String, default: '' }, required: { type: Boolean, default: false }, placeholder: { type: String, default: () => useI18n().t('components.form.pleaseSelect') }, 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 || '' }) const openPopup=()=>{ show.value=true } </script> <template> <div> <van-field :model-value="displayText" @click="openPopup" 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="body" safe-area-inset-bottom > <van-picker :columns="columns" @confirm="onConfirm" @cancel="show = false" :default-index="columns.findIndex(x => x.value === modelValue)" :title="t('components.form.pleaseSelect')" :confirm-button-text="t('components.dialog.confirm')" :cancel-button-text="t('components.dialog.cancel')" /> </van-popup> </div> </template>