Area 省市区选择

省市区三级联动选择。## 代码演示

基础用法

下面演示了省市区选择组件的用法，省市区选择完成后会触发 confirm 事件,返回值为省市区三项的数组。

首先安装vant提供的省市区数据源
yarn add @vant/area-data

  <hd-area ref="area" :area-data="areaData" :area="areaSelect" @confirm="doConfirm"></hd-area>

<script lang="ts" setup>
import { Area } from '@/uni_modules/fant-mini-plus/components/hd-area/types'
import { areaList } from '@vant/area-data'
import { ref } from 'vue'

const areaData = ref(areaList) // 位置信息数据
const areaSelect = ref<Ucn[]>([]) // 已选省市区
const area = ref<Area>() // ref


function onClick() {
  area.value?.showArea()
}

/**
 * 省市区选择成功
 * @param select 选择的省市区
 */
function doConfirm(select: Ucn[]) {
  areaSelect.value = select
}
</script>

Props

Name	Description	Type	Required	Default
areaData	省市区数据	Object	false	-
area	当前选中的省市区	Array	false	[]

Events

Event Name	Description	Parameters
close	地区选择器关闭时触发	-
confirm	地址选择完成后触发	value: 当前选中的省市区 Ucn[]