docs(Area): using @vant/area-data (#8492)

src/area/README.md

@@ -17,12 +17,54 @@ Vue.use(Area);
 
 ### Basic Usage
 
-To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
+To initailize `Area` component, `area-list` property is required.
 
 ```html
 <van-area title="Title" :area-list="areaList" />
 ```
 
+### areaList Data Structure
+
+An object contains three properties: `province_list`, `city_list` and `county_list`. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
+
+Sample data:
+
+```js
+export default {
+  province_list: {
+    110000: 'Beijing',
+    330000: 'Zhejiang Province',
+  },
+  city_list: {
+    110100: 'Beijing City',
+    330100: 'Hangzhou',
+  },
+  county_list: {
+    110101: 'Dongcheng District',
+    110102: 'Xicheng District',
+    // ....
+  },
+};
+```
+
+### @vant/area-data
+
+Vant officially provides a default area data, which can be imported through [@vant/area-data](https://github.com/youzan/vant/tree/dev/packages/vant-area-data):
+
+```bash
+yarn add @vant/area-data
+```
+
+```ts
+import { areaList } from '@vant/area-data';
+
+export default {
+  setup() {
+    return { areaList };
+  },
+};
+```
+
 ### Initial Value
 
 To have a selected value，simply pass the `code` of target area to `value` property.
@@ -95,36 +137,6 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance
 | ----- | ------------------------- | ------------- | ------------ |
 | reset | Reset all options by code | code?: string | -            |
 
-### areaList Data Structure
-
-An object contains three properties: `province_list`, `city_list` and `county_list`. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
-
-Example of `AreaList`
-
-```js
-{
-  province_list: {
-    110000: 'Beijing',
-    330000: 'Zhejiang Province'
-  },
-  city_list: {
-    110100: 'Beijing City',
-    330100: 'Hangzhou',
-  },
-  county_list: {
-    110101: 'Dongcheng District',
-    110102: 'Xicheng District',
-    110105: 'Chaoyang District',
-    110106: 'Fengtai District'
-    330105: 'Gongshu District',
-    330106: 'Xihu District',
-    // ....
-  }
-}
-```
-
-All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/src/area/demo/area-en.ts)
-
 ### argument of callback function confirm
 
 An array contains selected area objects.

src/area/README.zh-CN.md

@@ -17,12 +17,56 @@ Vue.use(Area);
 
 ### 基础用法
 
-要初始化一个 `Area` 组件，你需要传入一个 `area-list` 属性，数据格式具体可看下面数据格式章节。
+初始化省市区组件时，需要通过 `area-list` 属性传入省市区数据。
 
 ```html
 <van-area title="标题" :area-list="areaList" />
 ```
 
+### areaList 格式
+
+areaList 为对象结构，包含 `province_list`、`city_list`、`county_list` 三个 key。
+
+每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 `11`，以 0 补足 6 位，为 `110000`。
+
+示例数据如下：
+
+```js
+const areaList = {
+  province_list: {
+    110000: '北京市',
+    120000: '天津市',
+  },
+  city_list: {
+    110100: '北京市',
+    120100: '天津市',
+  },
+  county_list: {
+    110101: '东城区',
+    110102: '西城区',
+    // ....
+  },
+};
+```
+
+### @vant/area-data
+
+Vant 官方提供了一份默认的省市区数据，可以通过 [@vant/area-data](https://github.com/youzan/vant/tree/dev/packages/vant-area-data) 引入：
+
+```bash
+yarn add @vant/area-data
+```
+
+```ts
+import { areaList } from '@vant/area-data';
+
+export default {
+  data() {
+    return { areaList };
+  },
+};
+```
+
 ### 选中省市区
 
 如果想选中某个省市区，需要传入一个 `value` 属性，绑定对应的省市区 `code`。
@@ -95,43 +139,6 @@ Vue.use(Area);
 | --- | --- | --- | --- |
 | reset | 根据 code 重置所有选项，若不传 code，则重置到第一项 | code?: string | - |
 
-### 省市区列表数据格式
-
-整体是一个 object，包含 `province_list`, `city_list`, `county_list` 三个 key。
-
-每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 `11`，以零补足 6 位，为 `110000`。
-
-`AreaList`具体格式如下：
-
-```js
-{
-  province_list: {
-    110000: '北京市',
-    120000: '天津市'
-  },
-  city_list: {
-    110100: '北京市',
-    110200: '县',
-    120100: '天津市',
-    120200: '县'
-  },
-  county_list: {
-    110101: '东城区',
-    110102: '西城区',
-    110105: '朝阳区',
-    110106: '丰台区'
-    120101: '和平区',
-    120102: '河东区',
-    120103: '河西区',
-    120104: '南开区',
-    120105: '河北区',
-    // ....
-  }
-}
-```
-
-完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/src/area/demo/area.ts)
-
 ### 点击完成时返回的数据格式
 
 返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。