[Doc] Picker: add demo of usage with popup

packages/picker/demo/index.vue

@@ -18,13 +18,35 @@
     <demo-block :title="$t('title3')">
       <van-picker
         show-toolbar
-        :title="$t('area')"
+        :title="$t('title')"
         :columns="$t('column1')"
         @cancel="onCancel"
         @confirm="onConfirm"
       />
     </demo-block>
 
+    <demo-block :title="$t('withPopup')">
+      <van-field
+        readonly
+        clickable
+        :label="$t('city')"
+        :value="fieldValue"
+        :placeholder="$t('chooseCity')"
+        @click="onClickField"
+      />
+      <van-popup
+        v-model="showPicker"
+        position="bottom"
+      >
+        <van-picker
+          show-toolbar
+          :columns="$t('column1')"
+          @cancel="onCancel2"
+          @confirm="onConfirm2"
+        />
+      </van-popup>
+    </demo-block>
+
     <demo-block :title="$t('title2')">
       <van-picker :columns="$t('column2')" />
     </demo-block>
@@ -49,11 +71,13 @@
 export default {
   i18n: {
     'zh-CN': {
-      area: '标题',
+      city: '城市',
       title2: '禁用选项',
       title3: '展示顶部栏',
       title4: '多列联动',
       defaultIndex: '默认选中项',
+      withPopup: '搭配弹出层使用',
+      chooseCity: '选择城市',
       column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
       column2: [
         { text: '杭州', disabled: true },
@@ -67,11 +91,13 @@ export default {
       toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`
     },
     'en-US': {
-      area: 'Title',
+      city: 'City',
       title2: 'Disable Option',
       title3: 'Show Toolbar',
       title4: 'Multi Columns',
       defaultIndex: 'Default Index',
+      withPopup: 'With Popup',
+      chooseCity: 'Choose City',
       column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
       column2: [
         { text: 'Delaware', disabled: true },
@@ -86,6 +112,13 @@ export default {
     }
   },
 
+  data() {
+    return {
+      showPicker: false,
+      fieldValue: ''
+    };
+  },
+
   computed: {
     columns() {
       const column = this.$t('column3');
@@ -107,14 +140,30 @@ export default {
     onChange1(picker, value, index) {
       this.$toast(this.$t('toastContent', value, index));
     },
+
     onChange2(picker, values) {
       picker.setColumnValues(1, this.$t('column3')[values[0]]);
     },
+
     onConfirm(value, index) {
       this.$toast(this.$t('toastContent', value, index));
     },
+
     onCancel() {
       this.$toast(this.$t('cancel'));
+    },
+
+    onClickField() {
+      this.showPicker = true;
+    },
+
+    onConfirm2(value) {
+      this.showPicker = false;
+      this.fieldValue = value;
+    },
+
+    onCancel2() {
+      this.showPicker = false;
     }
   }
 };

packages/picker/en-US.md

@@ -75,6 +75,46 @@ export default {
 };
 ```
 
+### With Popup
+
+```html
+<van-field
+  readonly
+  clickable
+  label="City"
+  :value="value"
+  placeholder="Choose City"
+  @click="showPicker = true"
+/>
+
+<van-popup v-model="showPicker" position="bottom">
+  <van-picker
+    show-toolbar
+    :columns="columns"
+    @cancel="showPicker = false"
+    @confirm="onConfirm"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: '',
+      showPicker: false,
+      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
+    }
+  },
+  methods: {
+    onConfirm(value) {
+      this.value = value;
+      this.showPicker = false;
+    }
+  }
+};
+```
+
 ### Disable option
 
 ```html

packages/picker/test/__snapshots__/demo.spec.js.snap

@@ -61,6 +61,15 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__title van-field__label"><span>城市</span></div>
+      <div class="van-cell__value">
+        <div class="van-field__body"><input type="text" placeholder="选择城市" readonly="readonly" class="van-field__control"></div>
+      </div>
+    </div>
+    <!---->
+  </div>
   <div>
     <div class="van-picker">
       <!---->

packages/picker/zh-CN.md

@@ -81,6 +81,46 @@ export default {
 };
 ```
 
+### 搭配弹出层使用
+
+```html
+<van-field
+  readonly
+  clickable
+  label="城市"
+  :value="value"
+  placeholder="选择城市"
+  @click="showPicker = true"
+/>
+
+<van-popup v-model="showPicker" position="bottom">
+  <van-picker
+    show-toolbar
+    :columns="columns"
+    @cancel="showPicker = false"
+    @confirm="onConfirm"
+  />
+</van-popup>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: '',
+      showPicker: false,
+      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
+    }
+  },
+  methods: {
+    onConfirm(value) {
+      this.value = value;
+      this.showPicker = false;
+    }
+  }
+};
+```
+
 ### 禁用选项
 
 选项可以为对象结构，通过设置 disabled 来禁用该选项