💚毕竟一生很长,少有圆满
<van-field>输入框
<van-field
:rules="[{ required: true, message: '' }]"
@click="inBirthShow = true"
active-color="#00A4B7"
is-link
name="birthplace"
placeholder="请选择"
readonly
ref="data"
v-model="infoForm1.birthplace"
/>
<van-popup>弹出框
<!-- 国内-出生地 -->
<van-popup
:style="{ height: '50%' }"
position="bottom"
round
safe-area-inset-bottom
v-model:show="inBirthShow"
>
<!-- 级联选择器 -->
<van-cascader
:field-names="fieldNames0"
:options="options"
@close="inBirthShow = false"
@finish="onFinish"
active-color="#00A4B7"
title="请选择所在地区"
v-model="infoForm0.cascaderValue"
/>
</van-popup>
数据
const state = reactive({
infoForm0: {
birthplace: '',
shortCode: '',
cascaderValue: '', //级联选中数据
},
options: [], //所有国家选项
fieldNames0: {
text: 'name',
value: 'name',
},
})
接口获取全部地区选项
onMounted(() => {
_base.code().then((res) => {
state.options = res || []
})
})
级联选择标签完成事件onfinish()
// 国内居民:出生地
const onFinish = ({ selectedOptions }) => {
state.inBirthShow = false
state.infoForm0.birthplace = selectedOptions
.map((option) => option.name)
.join('/')
state.infoForm0.shortCode = selectedOptions
.map((option) => option.shortCode)
.join('/')
}