88 lines
1.5 KiB
Vue
88 lines
1.5 KiB
Vue
|
<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>
|