[new feature] Picker: add default-index prop (#2935)

packages/picker/demo/index.vue

@@ -7,8 +7,12 @@
       />
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('defaultIndex')">
-      <van-picker :columns="$t('column2')" />
+      <van-picker
+        :columns="$t('column1')"
+        :default-index="2"
+        @change="onChange1"
+      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -21,6 +25,10 @@
       />
     </demo-block>
 
+    <demo-block :title="$t('title2')">
+      <van-picker :columns="$t('column2')" />
+    </demo-block>
+
     <demo-block :title="$t('title4')">
       <van-picker
         :columns="columns"
@@ -45,6 +53,7 @@ export default {
       title2: '禁用选项',
       title3: '展示顶部栏',
       title4: '多列联动',
+      defaultIndex: '默认选中项',
       column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
       column2: [
         { text: '杭州', disabled: true },
@@ -62,6 +71,7 @@ export default {
       title2: 'Disable Option',
       title3: 'Show Toolbar',
       title4: 'Multi Columns',
+      defaultIndex: 'Default Index',
       column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
       column2: [
         { text: 'Delaware', disabled: true },

packages/picker/en-US.md

@@ -31,24 +31,14 @@ export default {
 };
 ```
 
-#### Disable option
+#### Default Index
 
 ```html
-<van-picker :columns="columns" />
+<van-picker
-```
+  :columns="columns"
-
+  :default-index="2"
-```javascript
+  @change="onChange"
-export default {
+/>
-  data() {
-    return {
-      columns: [
-        { text: 'Delaware', disabled: true },
-        { text: 'Florida' },
-        { text: 'Georqia' }
-      ]
-    };
-  }
-};
 ```
 
 #### Show Toolbar
@@ -81,6 +71,26 @@ export default {
 };
 ```
 
+#### Disable option
+
+```html
+<van-picker :columns="columns" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      columns: [
+        { text: 'Delaware', disabled: true },
+        { text: 'Florida' },
+        { text: 'Georqia' }
+      ]
+    };
+  }
+};
+```
+
 #### Multi columns
 
 ```html
@@ -137,6 +147,7 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
 | confirm-button-text | Text of confirm button | `String` | `Confirm` |
 | cancel-button-text | Text of cancel button | `String` | `Cancel` |
 | visible-item-count | Count of visible columns | `Number` | `5` |
+| default-index | Default value index of single column picker | `Number` | `0` |
 
 ### Event
 Picker events will pass different parameters according to the columns are single or multiple

packages/picker/index.js

@@ -11,6 +11,10 @@ export default sfc({
   props: {
     ...pickerProps,
     columns: Array,
+    defaultIndex: {
+      type: Number,
+      default: 0
+    },
     valueKey: {
       type: String,
       default: 'text'
@@ -185,7 +189,7 @@ export default sfc({
               valueKey={this.valueKey}
               className={item.className}
               itemHeight={this.itemHeight}
-              defaultIndex={item.defaultIndex}
+              defaultIndex={item.defaultIndex || this.defaultIndex}
               visibleItemCount={this.visibleItemCount}
               initialOptions={this.simple ? item : item.values}
               onChange={() => {

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

@@ -22,10 +22,12 @@ exports[`renders demo correctly 1`] = `
     <div class="van-picker">
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">
-          <ul style="transition:0ms;transform:translate3d(0, 44px, 0);line-height:44px;">
+          <ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height:44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
-            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
-            <li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
+            <li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
+            <li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
           </ul>
         </div>
         <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@@ -53,6 +55,20 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-picker">
+      <div class="van-picker__columns" style="height:220px;">
+        <div class="van-picker-column" style="height:220px;">
+          <ul style="transition:0ms;transform:translate3d(0, 44px, 0);line-height:44px;">
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height:44px;">杭州</li>
+            <li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">宁波</li>
+            <li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
+          </ul>
+        </div>
+        <div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-picker">
       <div class="van-picker__columns" style="height:220px;">

packages/picker/zh-CN.md

@@ -10,9 +10,10 @@ Vue.use(Picker);
 
 ### 代码演示
 
-
 #### 基础用法
 
+对于单列选择器，传入数值格式的 columns 即可，同时可以监听选项改变的 change 事件
+
 ```html
 <van-picker :columns="columns" @change="onChange" />
 ```
@@ -32,29 +33,22 @@ export default {
 };
 ```
 
-#### 禁用选项
+#### 默认选中项
-选项可以为对象结构，通过设置 disabled 来禁用该选项
+
+单列选择器可以直接通过`default-index`属性设置初始选中项的索引值
 
 ```html
-<van-picker :columns="columns" />
+<van-picker
-```
+  :columns="columns"
-
+  :default-index="2"
-```javascript
+  @change="onChange"
-export default {
+/>
-  data() {
-    return {
-      columns: [
-        { text: '杭州', disabled: true },
-        { text: '宁波' },
-        { text: '温州' }
-      ]
-    };
-  }
-};
 ```
 
 #### 展示顶部栏
 
+通常选择器组件会传入`show-toolbar`属性以展示顶部操作栏，并可以监听对应的`confirm`和`cancel`事件
+
 ```html
 <van-picker
   show-toolbar
@@ -83,6 +77,28 @@ export default {
 };
 ```
 
+#### 禁用选项
+
+选项可以为对象结构，通过设置 disabled 来禁用该选项
+
+```html
+<van-picker :columns="columns" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      columns: [
+        { text: '杭州', disabled: true },
+        { text: '宁波' },
+        { text: '温州' }
+      ]
+    };
+  }
+};
+```
+
 #### 多列联动
 
 ```html
@@ -120,7 +136,8 @@ export default {
 ```
 
 #### 加载状态
-当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
+
+若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示
 
 ```html
 <van-picker :columns="columns" loading />
@@ -139,6 +156,7 @@ export default {
 | confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
 | cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
 | visible-item-count | 可见的选项个数 | `Number` | `5` | - |
+| default-index | 单列选择器的默认选中项索引，<br>多列选择器请参考下方的 Columns 配置 | `Number` | `0` | 1.6.9 |
 
 ### Event