docs(Form): add Picker demo

src/form/README.md

@@ -195,6 +195,49 @@ export default {
 };
 ```
 
+### Field Type - Picker
+
+```html
+<van-field
+  readonly
+  clickable
+  name="picker"
+  :value="value"
+  label="Picker"
+  placeholder="Picker"
+  @click="showPicker = true"
+/>
+<van-popup v-model="showPicker" position="bottom">
+  <van-picker
+    show-toolbar
+    :columns="columns"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: '',
+      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+      showPicker: false,
+    };
+  },
+  methods: {
+    onConfirm(value) {
+      this.value = value;
+      this.showPicker = false;
+    },
+    onCancel() {
+      this.showPicker = false;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props

src/form/README.zh-CN.md

@@ -201,6 +201,49 @@ export default {
 };
 ```
 
+### 表单项类型 - 选择器
+
+```html
+<van-field
+  readonly
+  clickable
+  name="picker"
+  :value="value"
+  label="选择器"
+  placeholder="点击选择城市"
+  @click="showPicker = true"
+/>
+<van-popup v-model="showPicker" position="bottom">
+  <van-picker
+    show-toolbar
+    :columns="columns"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: '',
+      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      showPicker: false,
+    };
+  },
+  methods: {
+    onConfirm(value) {
+      this.value = value;
+      this.showPicker = false;
+    },
+    onCancel() {
+      this.showPicker = false;
+    },
+  },
+};
+```
+
 ## API
 
 ### Props

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>

src/form/test/__snapshots__/demo.spec.js.snap

@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
         </div>
       </div>
-      <div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
+      <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
     </form>
   </div>
   <div>
@@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value van-field__value">
           <div class="van-field__body">
             <div class="van-field__control van-field__control--custom">
-              <div role="switch" aria-checked="false" class="van-switch" style="font-size: 24px;">
+              <div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
                 <div class="van-switch__node"></div>
               </div>
             </div>
@@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body">
             <div class="van-field__control van-field__control--custom">
               <div role="radiogroup" class="van-radio-group van-radio-group--horizontal">
-                <div role="radio" tabindex="0" aria-checked="true" class="demo-radio van-radio van-radio--horizontal">
+                <div role="radio" tabindex="0" aria-checked="true" class="van-radio van-radio--horizontal">
                   <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success">
                       <!----></i></div><span class="van-radio__label">单选框 1</span>
                 </div>
@@ -88,6 +88,16 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
+      <div class="van-cell 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">
+            <div class="van-field__control van-field__control--custom">
+              <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>评分</span></div>
         <div class="van-cell__value van-field__value">
@@ -125,16 +135,6 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-cell 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">
-            <div class="van-field__control van-field__control--custom">
-              <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div class="van-cell van-field">
         <div class="van-cell__title van-field__label"><span>文件上传</span></div>
         <div class="van-cell__value van-field__value">
@@ -157,7 +157,16 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div style="margin: 16px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></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="picker" readonly="readonly" placeholder="点击选择城市" class="van-field__control"></div>
+          </div>
+        </div>
+        <!---->
+      </div>
+      <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
     </form>
   </div>
 </div>