docs(Form): add Area demo

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

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>

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')"