docs(Form): add Picker demo

src/form/demo/FieldType.vue

@@ -47,6 +47,8 @@
         <van-uploader v-model="uploader" slot="input" multiple max-count="2" />
       </van-field>
 
+      <field-type-picker />
+
       <div style="margin: 16px 16px 0;">
         <van-button type="info" round block>{{ $t('submit') }}</van-button>
       </div>
@@ -55,6 +57,8 @@
 </template>
 
 <script>
+import FieldTypePicker from './FieldTypePicker';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -63,6 +67,7 @@ export default {
       submit: '提交',
       switch: '开关',
       slider: '滑块',
+      picker: '选择器',
       stepper: '步进器',
       checkbox: '复选框',
       uploader: '文件上传',
@@ -76,6 +81,7 @@ export default {
       submit: 'Submit',
       switch: 'Switch',
       slider: 'Slider',
+      picker: 'Picker',
       stepper: 'Stepper',
       checkbox: 'Checkbox',
       uploader: 'Uploader',
@@ -85,6 +91,10 @@ export default {
     },
   },
 
+  components: {
+    FieldTypePicker,
+  },
+
   data() {
     return {
       rate: 3,

src/form/demo/FieldTypePicker.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <van-field
+      readonly
+      clickable
+      name="picker"
+      :value="value"
+      :label="$t('picker')"
+      :placeholder="$t('placeholder')"
+      @click="showPicker = true"
+    />
+    <van-popup v-model="showPicker" position="bottom">
+      <van-picker
+        show-toolbar
+        :columns="$t('textColumns')"
+        @confirm="onConfirm"
+        @cancel="onCancel"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      picker: '选择器',
+      placeholder: '点击选择城市',
+      textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+    },
+    'en-US': {
+      picker: 'Picker',
+      placeholder: 'Picker',
+      textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+    },
+  },
+
+  data() {
+    return {
+      value: '',
+      showPicker: false,
+    };
+  },
+
+  methods: {
+    onConfirm(value) {
+      this.value = value;
+      this.showPicker = false;
+    },
+
+    onCancel() {
+      this.showPicker = false;
+    },
+  },
+};
+</script>