[Doc] Picker: add demo of usage with popup

2019-05-31 21:17:29 +08:00
parent 9a32a4a35d
commit 898ba11483
4 changed files with 141 additions and 3 deletions
@@ -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 来禁用该选项