vant-weapp Area 省市区选择的使用及遇到的坑

.json中 导入

"van-area": "@vant/weapp/area/index"

基础用法：

<van-area area-list="{{ areaList }}" />

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

npm i @vant/area-data

安装之后，在node-module/@vant中出现了area-data目录，

导入数据，但报错“module ‘../../miniprogram_npm/@vant/area-data.js’ is not defined”

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

Page({
  data: {
    areaList,
  },
});

不管怎么改路径，都会报错。

修改：

1.  可以在下载的area-data里面看到这个index.esm.js文件里面就是官方要求格式的省市区代码和名称，我们把这个文件复制到其他文件夹里.

2. 删掉已经下载的area-data文件夹，重新下载。

npm i area-data@3.1.2 

此时安装在node-module根目录下。

3. 把之前复制到其他文件夹里的index.esm.js文件拷贝到area-data文件夹下，并改名为data.js。最后把整个新的area-data文件夹移动到miniprogram_npm/@vant下面。

4. 再导入数据

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

此时再重新编译，就可以正常显示了。