From fb3892e3024a05cd61ecefd26538803e6f2c2274 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Tue, 11 Feb 2020 15:24:09 +0800
Subject: [PATCH] docs(Form): add Area demo

---
 src/form/README.md                            | 46 ++++++++++++++-
 src/form/README.zh-CN.md                      | 44 +++++++++++++-
 src/form/demo/FieldType.vue                   |  3 +
 src/form/demo/FieldTypeArea.vue               | 58 +++++++++++++++++++
 src/form/demo/FieldTypeDatetimePicker.vue     |  2 +-
 src/form/test/__snapshots__/demo.spec.js.snap | 11 +++-
 6 files changed, 159 insertions(+), 5 deletions(-)
 create mode 100644 src/form/demo/FieldTypeArea.vue

diff --git a/src/form/README.md b/src/form/README.md
index 18040fca3..2ffa830bb 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -244,9 +244,9 @@ export default {
 <van-field
   readonly
   clickable
-  name="picker"
+  name="datetimePicker"
   :value="value"
-  label="DatetimePicker"
+  label="Datetime Picker"
   placeholder="Select time"
   @click="showPicker = true"
 />
@@ -284,6 +284,48 @@ export default {
 };
 ```
 
+### Field Type - Area
+
+```html
+<van-field
+  readonly
+  clickable
+  name="area"
+  :value="value"
+  label="Area Picker"
+  placeholder="Select area"
+  @click="showArea = true"
+/>
+<van-popup v-model="showArea" position="bottom">
+  <van-area
+    :area-list="areaList"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: '',
+      showArea: false,
+      areaList: {}
+    };
+  },
+  methods: {
+    onConfirm(values) {
+      this.value = values.map(item => item.name).join('/');
+      this.showArea = false;
+    },
+    onCancel() {
+      this.showArea = false;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index a461db7b4..b1f85de37 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -250,7 +250,7 @@ export default {
 <van-field
   readonly
   clickable
-  name="picker"
+  name="datetimePicker"
   :value="value"
   label="时间选择"
   placeholder="点击选择时间"
@@ -290,6 +290,48 @@ export default {
 };
 ```
 
+### 表单项类型 - 省市区选择器
+
+```html
+<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="onCancel"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: '',
+      showArea: false,
+      areaList: {} // 数据格式见 Area 组件文档
+    };
+  },
+  methods: {
+    onConfirm(values) {
+      this.value = values.map(item => item.name).join('/');
+      this.showArea = false;
+    },
+    onCancel() {
+      this.showArea = false;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index 09606a4e4..3d74062ac 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -49,6 +49,7 @@
 
       <field-type-picker />
       <field-type-datetime-picker />
+      <field-type-area />
 
       <div style="margin: 16px 16px 0;">
         <van-button type="info" round block>{{ $t('submit') }}</van-button>
@@ -58,6 +59,7 @@
 </template>
 
 <script>
+import FieldTypeArea from './FieldTypeArea';
 import FieldTypePicker from './FieldTypePicker';
 import FieldTypeDatetimePicker from './FieldTypeDatetimePicker';
 
@@ -94,6 +96,7 @@ export default {
   },
 
   components: {
+    FieldTypeArea,
     FieldTypePicker,
     FieldTypeDatetimePicker,
   },
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
new file mode 100644
index 000000000..ffad6dcf4
--- /dev/null
+++ b/src/form/demo/FieldTypeArea.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <van-field
+      readonly
+      clickable
+      name="area"
+      :value="value"
+      :label="$t('picker')"
+      :placeholder="$t('placeholder')"
+      @click="showArea = true"
+    />
+    <van-popup v-model="showArea" position="bottom">
+      <van-area
+        :area-list="$t('areaList')"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import AreaList from '../../area/demo/area';
+import AreaListEn from '../../area/demo/area-en';
+
+export default {
+  i18n: {
+    'zh-CN': {
+      picker: '地区选择',
+      areaList: AreaList,
+      placeholder: '点击选择省市区',
+    },
+    'en-US': {
+      picker: 'Area Picker',
+      areaList: AreaListEn,
+      placeholder: 'Select area',
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+      showArea: false,
+    };
+  },
+
+  methods: {
+    onConfirm(values) {
+      this.value = values.map(item => item.name).join('/');
+      this.showArea = false;
+    },
+
+    onCancel() {
+      this.showArea = false;
+    },
+  },
+};
+</script>
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 0d10cc758..eb5dfd0f9 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -3,7 +3,7 @@
     <van-field
       readonly
       clickable
-      name="picker"
+      name="datetimePicker"
       :value="value"
       :label="$t('label')"
       :placeholder="$t('placeholder')"
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index e94e0c786..be11280fb 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -170,7 +170,16 @@ exports[`renders demo correctly 1`] = `
         <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
           <div class="van-cell__title van-field__label"><span>时间选择</span></div>
           <div class="van-cell__value van-field__value">
-            <div class="van-field__body"><input type="text" name="picker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
+            <div class="van-field__body"><input type="text" name="datetimePicker" readonly="readonly" placeholder="点击选择时间" class="van-field__control"></div>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div>
+        <div role="button" tabindex="0" class="van-cell van-cell--clickable van-field">
+          <div class="van-cell__title van-field__label"><span>地区选择</span></div>
+          <div class="van-cell__value van-field__value">
+            <div class="van-field__body"><input type="text" name="area" readonly="readonly" placeholder="点击选择省市区" class="van-field__control"></div>
           </div>
         </div>
         <!---->