Area 省市区选择

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

基础用法

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

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

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

import { areaList } from '@vant/area-data'

export default {
  data() {
    return {
        area:[], // 已选省市区
        areaData:areaList // 省市区数据源 (这里用的vant的数据源)

    };
  },
  methods: {
    showArea(){
      this.$refs.area.open();
    }
    onConfirm(area) {
      this.area = area;
    },
  },
};

Props

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

Events

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