From 15fe068955d8b1b209ae4b242cb251db81184518 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 9 Apr 2021 16:34:10 +0800
Subject: [PATCH] docs(Area): using @vant/area-data (#4139)

---
 packages/area/README.md | 83 ++++++++++++++++++++++-------------------
 1 file changed, 45 insertions(+), 38 deletions(-)

diff --git a/packages/area/README.md b/packages/area/README.md
index 2af7278c..56b7e380 100644
--- a/packages/area/README.md
+++ b/packages/area/README.md
@@ -18,12 +18,56 @@
 
 ### 基础用法
 
-要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
+初始化省市区组件时，需要通过 `area-list` 属性传入省市区数据。
 
 ```html
 <van-area 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';
+
+Page({
+  data: {
+    areaList,
+  },
+});
+```
+
 ### 选中省市区
 
 如果想选中某个省市区，需要传入一个`value`属性，绑定对应的省市区`code`
@@ -111,43 +155,6 @@ db.collection('region')
 | --- | --- | --- | --- |
 | reset | code: string | - | 根据 code 重置所有选项，若不传 code，则重置到第一项 |
 
-### 省市区列表数据格式
-
-整体是一个 Object，包含 `province_list`, `city_list`, `county_list` 三个 key。
-
-每项以省市区编码作为 key，省市区名字作为 value。编码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。如北京编码为 `11`，以零补足 6 位，为 `110000`。
-
-`AreaList`具体格式如下：
-
-```javascript
-{
-  province_list: {
-    110000: '北京市',
-    120000: '天津市'
-  },
-  city_list: {
-    110100: '北京市',
-    110200: '县',
-    120100: '天津市',
-    120200: '县'
-  },
-  county_list: {
-    110101: '东城区',
-    110102: '西城区',
-    110105: '朝阳区',
-    110106: '丰台区',
-    120101: '和平区',
-    120102: '河东区',
-    120103: '河西区',
-    120104: '南开区',
-    120105: '河北区',
-    // ....
-  }
-}
-```
-
-完整数据见 [area.ts](https://github.com/youzan/vant/blob/dev/src/area/demo/area.ts)
-
 ### 点击完成时返回的数据格式
 
 返回的数据整体为一个 Object，包含 `values`, `indexs` 两个 key