feat(Picker): support cascade columns (#4247)

2020-01-26 15:35:53 +08:00
parent a49d239d69
commit c04697cc42
8 changed files with 355 additions and 105 deletions
@@ -80,41 +80,36 @@ export default {
 };
 ```

-### With Popup
+### Cascade

 ```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>
+<van-picker show-toolbar title="Title" :columns="columns" />
 ```

 ```js
 export default {
  data() {
    return {
-      value: '',
-      showPicker: false,
-      columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
-    }
-  },
-  methods: {
-    onConfirm(value) {
-      this.value = value;
-      this.showPicker = false;
-    }
+      columns: [{
+        text: 'Zhejiang',
+        children: [{
+          text: 'Hangzhou',
+          children: [{ text: 'Xihu' }, { text: 'Yuhang' }]
+        }, {
+          text: 'Wenzhou',
+          children: [{ text: 'Lucheng' }, { text: 'Ouhai' }]
+        }]
+      }, {
+        text: 'Fujian',
+        children: [{
+          text: 'Fuzhou',
+          children: [{ text: 'Gulou' }, { text: 'Taijiang' }]
+        }, {
+          text: 'Xiamen',
+          children: [{ text: 'Siming' }, { text: 'Haicang' }]
+        }]
+      }]
+    };
  }
 };
 ```
@@ -183,6 +178,45 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
 <van-picker :columns="columns" loading />
 ```

+### 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;
+    }
+  }
+};
+```
+
 ## API

 ### Props