Area 省市区选择

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/area

提供完整的省市区选择器. 注意省市区的数据依旧需要绑定. 一般结合 Popup 使用.

<van-area v-model="selected" title="标题" :area-list="areaList" />

import { areaList } from '@vant/area-data';
const selected = ref<string>()

常用属性:

• v-model 用于绑定选中的城市地区编码.
• title 顶部标题栏.
• area-list 用于绑定省市区数据.

常用事件:

• confirm 点击完成时触发. 事件参数 { selectedValues, selectedOptions, selectedIndexes }.
• cancel 点击取消时触发.

数据类型说明

export declare const areaList: {
    province_list: Record<string, string>;
    city_list: Record<string, string>;
    county_list: Record<string, string>;
};

• 其中 province_list 是省数据键值对; city_list 市数据键值对; county_list 区数据键值对. 其键为地区编码.

• 而 confirm 事件参数中:

  • selectedValues 存储选中的省市区, 三级城市地区编码的有序数组.
  • selectedOptions 为省市区的对象数组.

<template>
  <van-area :area-list="areaList" @confirm="confirm"></van-area>
</template>

<script lang="ts" setup>
import 'vant'
import { areaList } from '@vant/area-data'

const confirm = (item: any) => {
  console.log('选中项', item);
  console.log('areaList', areaList);
}
</script>