d840c2a453
- 在 zh-CN.json 中添加了新文本 "text1": "请选择性别" - 更新了多个组件的国际化支持，包括 realAuth、profile、itemDetail 等 -优化了部分组件的布局和样式
81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<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> |