86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<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> |