vant省市区域选择

Vant 官方提供了一份默认的省市区数据

打开地址

https://github.com/youzan/vant/tree/dev/packages/vant-area-data

执行命令

npm/cnpm i @vant/area-data -D

项目里引用

<template>
  <div>
    <div>测试</div>
    <van-field
      readonly
      clickable
      name="area"
      :value="value"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
export default {
  components: {},
  data() {
    return {
      show: false,
      value: "",
      showArea: false,
      areaList: areaList // 数据格式见 Area 组件文档
    };
  },
  methods: {
    onConfirm(values) {
      this.value = values
        .filter(item => !!item)
        .map(item => item.name)
        .join("/");
      this.showArea = false;
      console.log(this.value);
    }
  }
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>