在vue中使用vant的日历组件

刚开始还研究了半天，其实也并没有想象中的难，刚开始用的时候什么也显示不出来，研究了半天显示出来了但没有具体地区，最后终于弄出来了，话不多说，下面就是研究成果，记录下来方便以后查看，也希望能帮助到同样遇到这个困难的你。。。

首先看成果：

直接上代码

也可以直接去官网自行研究Vant

template中的代码

<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>

script中的代码

export default {
  data() {
    return {
      value: '',
      showArea: false,
      areaList, //这里要注意一下，在官网上后面是个空对象,需要改一下
    };
  },
  methods: {
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
  },
};

直通Area 省市区选择组件的快车

这里我选择的是下面这种方式

这里是安装及使用的步骤

NPM
npm i @vant/area-data -D
YARN
yarn add @vant/area-data --dev
使用
import { areaList } from ‘@vant/area-data’;

注意：areaList: {} 换成 areaList

赶紧动起手来试试，，，。