级联选择器弹出框

400 阅读1分钟

💚毕竟一生很长,少有圆满

image.png

<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('/')
      }