docs(Picker): add multiple columns demo

src/picker/README.md

@@ -80,6 +80,31 @@ export default {
 };
 ```
 
+### Multiple Columns
+
+```html
+<van-picker show-toolbar title="Title" :columns="columns" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
+          defaultIndex: 2
+        },
+        {
+          values: ['Morging', 'Afternoon', 'Evening'],
+          defaultIndex: 1
+        }
+      ]
+    };
+  }
+};
+```
+
 ### Cascade
 
 ```html
@@ -261,6 +286,7 @@ Picker events will pass different parameters according to the columns are single
 | values | Value of column | *string[]* |
 | defaultIndex | Default value index | *number* |
 | className | ClassName for this column | *any* |
+| children | Cascade children | *Column* |
 
 ### Methods
 

src/picker/README.zh-CN.md

@@ -82,6 +82,35 @@ export default {
 };
 ```
 
+### 多列选择
+
+通过`columns`属性可以配置多列选择
+
+```html
+<van-picker show-toolbar title="标题" :columns="columns" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      columns: [
+        // 第一列
+        {
+          values: ['周一', '周二', '周三', '周四', '周五'],
+          defaultIndex: 2
+        },
+        // 第二列
+        {
+          values: ['上午', '下午', '晚上'],
+          defaultIndex: 1
+        }
+      ]
+    };
+  }
+};
+```
+
 ### 级联选择
 
 使用`columns`的`children`字段可以实现选项级联的效果（从 2.4.5 版本开始支持）
@@ -155,17 +184,14 @@ const citys = {
 export default {
   data() {
     return {
-      columns: [
+      columns: [{
-        {
+        values: Object.keys(citys),
-          values: Object.keys(citys),
+        className: 'column1'
-          className: 'column1'
+      }, {
-        },
+        values: citys['浙江'],
-        {
+        className: 'column2',
-          values: citys['浙江'],
+        defaultIndex: 2
-          className: 'column2',
+      }]
-          defaultIndex: 2
-        }
-      ]
     };
   },
   methods: {
@@ -273,6 +299,7 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
 | values | 列中对应的备选值 | *string[]*
 | defaultIndex | 初始选中项的索引，默认为 0 | *number* |
 | className | 为对应列添加额外的类名 | *any* |
+| children | 级联选项 | *Column* |
 
 ### 方法
 

src/picker/demo/data.ts

@@ -1,3 +1,26 @@
+export const dateColumns = {
+  'zh-CN': [
+    {
+      values: ['周一', '周二', '周三', '周四', '周五'],
+      defaultIndex: 2,
+    },
+    {
+      values: ['上午', '下午', '晚上'],
+      defaultIndex: 1,
+    },
+  ],
+  'en-US': [
+    {
+      values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
+      defaultIndex: 2,
+    },
+    {
+      values: ['Morging', 'Afternoon', 'Evening'],
+      defaultIndex: 1,
+    },
+  ],
+};
+
 export const cascadeColumns = {
   'zh-CN': [
     {

src/picker/demo/index.vue

@@ -1,12 +1,12 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-picker :columns="$t('column1')" @change="onChange1" />
+      <van-picker :columns="$t('textColumns')" @change="onChange1" />
     </demo-block>
 
     <demo-block :title="$t('defaultIndex')">
       <van-picker
-        :columns="$t('column1')"
+        :columns="$t('textColumns')"
         :default-index="2"
         @change="onChange1"
       />
@@ -16,7 +16,17 @@
       <van-picker
         show-toolbar
         :title="$t('title')"
-        :columns="$t('column1')"
+        :columns="$t('textColumns')"
+        @cancel="onCancel"
+        @confirm="onConfirm"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('multipleColumns')">
+      <van-picker
+        show-toolbar
+        :title="$t('title')"
+        :columns="$t('dateColumns')"
         @cancel="onCancel"
         @confirm="onConfirm"
       />
@@ -33,7 +43,7 @@
     </demo-block>
 
     <demo-block :title="$t('disableOption')">
-      <van-picker :columns="$t('column2')" />
+      <van-picker :columns="$t('disabledColumns')" />
     </demo-block>
 
     <demo-block :title="$t('title4')">
@@ -56,7 +66,7 @@
       <van-popup v-model="showPicker" position="bottom">
         <van-picker
           show-toolbar
-          :columns="$t('column1')"
+          :columns="$t('textColumns')"
           @cancel="onCancel2"
           @confirm="onConfirm2"
         />
@@ -66,7 +76,7 @@
 </template>
 
 <script>
-import { cascadeColumns } from './data';
+import { dateColumns, cascadeColumns } from './data';
 
 export default {
   i18n: {
@@ -77,11 +87,13 @@ export default {
       withPopup: '搭配弹出层使用',
       chooseCity: '选择城市',
       showToolbar: '展示顶部栏',
+      dateColumns: dateColumns['zh-CN'],
       defaultIndex: '默认选中项',
       disableOption: '禁用选项',
       cascadeColumns: cascadeColumns['zh-CN'],
-      column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      multipleColumns: '多列选择',
-      column2: [
+      textColumns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+      disabledColumns: [
         { text: '杭州', disabled: true },
         { text: '宁波' },
         { text: '温州' },
@@ -99,11 +111,13 @@ export default {
       withPopup: 'With Popup',
       chooseCity: 'Choose City',
       showToolbar: 'Show Toolbar',
+      dateColumns: dateColumns['en-US'],
       defaultIndex: 'Default Index',
       disableOption: 'Disable Option',
       cascadeColumns: cascadeColumns['en-US'],
-      column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+      multipleColumns: 'Multiple Columns',
-      column2: [
+      textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+      disabledColumns: [
         { text: 'Delaware', disabled: true },
         { text: 'Florida' },
         { text: 'Georqia' },

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

@@ -62,6 +62,35 @@ exports[`renders demo correctly 1`] = `
       <!---->
     </div>
   </div>
+  <div>
+    <div class="van-picker">
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周一</li>
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周二</li>
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">周三</li>
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周四</li>
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周五</li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上午</li>
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">下午</li>
+            <li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">晚上</li>
+          </ul>
+        </div>
+        <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+      <!---->
+    </div>
+  </div>
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>