[new feature] Picker: add new prop default-index

example/pages/picker/index.wxml

@@ -5,9 +5,11 @@
   />
 </demo-block>
 
-<demo-block title="禁用选项">
+<demo-block title="默认选中项">
   <van-picker
-    columns="{{ column2 }}"
+    columns="{{ column1 }}"
+    default-index="{{ 2 }}"
+    bind:change="onChange1"
   />
 </demo-block>
 
@@ -22,6 +24,10 @@
   />
 </demo-block>
 
+<demo-block title="禁用选项">
+  <van-picker columns="{{ column2 }}" />
+</demo-block>
+
 <demo-block title="多列联动">
   <van-picker
     columns="{{ column4 }}"

packages/area/index.ts

@@ -1,34 +1,24 @@
 import { VantComponent } from '../common/component';
+import { pickerProps } from '../picker/shared';
 
 type AreaItem = {
-  name: string
-  code: string
+  name: string;
+  code: string;
 };
 
 VantComponent({
   classes: ['active-class', 'toolbar-class', 'column-class'],
 
   props: {
-    title: String,
+    ...pickerProps,
     value: String,
-    loading: Boolean,
-    cancelButtonText: String,
-    confirmButtonText: String,
-    itemHeight: {
-      type: Number,
-      value: 44
-    },
-    visibleItemCount: {
-      type: Number,
-      value: 5
+    areaList: {
+      type: Object,
+      value: {}
     },
     columnsNum: {
       type: [String, Number],
       value: 3
-    },
-    areaList: {
-      type: Object,
-      value: {}
     }
   },
 
@@ -152,7 +142,7 @@ VantComponent({
       stack.push(picker.setColumnValues(1, city, false));
 
       if (city.length && code.slice(2, 4) === '00') {
-        ;[{ code }] = city;
+        [{ code }] = city;
       }
 
       stack.push(

packages/datetime-picker/index.ts

@@ -1,13 +1,14 @@
 import { VantComponent } from '../common/component';
 import { isDef } from '../common/utils';
+import { pickerProps } from '../picker/shared';
 
 const currentYear = new Date().getFullYear();
 
-function isValidDate(date) {
+function isValidDate(date: number) {
   return isDef(date) && !isNaN(new Date(date).getTime());
 }
 
-function range(num, min, max) {
+function range(num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max);
 }
 
@@ -15,7 +16,7 @@ function padZero(val: string | number): string {
   return `00${val}`.slice(-2);
 }
 
-function times(n: number, iteratee: (number) => string): string[] {
+function times(n: number, iteratee: (index: number) => string): string[] {
   let index = -1;
   const result = Array(n);
 
@@ -39,25 +40,8 @@ function getMonthEndDay(year: number, month: number): number {
 
 VantComponent({
   props: {
+    ...pickerProps,
     value: null,
-    title: String,
-    loading: Boolean,
-    itemHeight: {
-      type: Number,
-      value: 44
-    },
-    visibleItemCount: {
-      type: Number,
-      value: 5
-    },
-    confirmButtonText: {
-      type: String,
-      value: '确认'
-    },
-    cancelButtonText: {
-      type: String,
-      value: '取消'
-    },
     type: {
       type: String,
       value: 'datetime'
@@ -98,7 +82,7 @@ VantComponent({
   },
 
   watch: {
-    value(val) {
+    value(val: any) {
       const { data } = this;
       val = this.correctValue(val);
       const isEqual = val === data.innerValue;

packages/picker-column/index.ts

@@ -47,7 +47,7 @@ VantComponent({
   },
 
   methods: {
-    onChange(event) {
+    onChange(event: Weapp.Event) {
       if (!event.detail.source) {
         return;
       }
@@ -116,7 +116,7 @@ VantComponent({
       const { options = [], valueKey } = this.data;
 
       const index = options.findIndex(
-        item => getOptionText(item, valueKey) === value
+        (item: any) => getOptionText(item, valueKey) === value
       );
       return index !== -1 ? this.setIndex(index) : Promise.resolve();
     },

packages/picker/README.md

@@ -29,6 +29,8 @@ es5
 
 ```javascript
 import Toast from 'path/to/vant-weapp/dist/toast/toast';
+// es5
+const Toast = require('path/to/vant-weapp/lib/toast/toast');
 
 Page({
   data: {
@@ -42,23 +44,16 @@ Page({
 });
 ```
 
-#### 禁用选项
-选项可以为对象结构，通过设置 disabled 来禁用该选项
+#### 默认选中项
+
+单列选择器可以直接通过`default-index`属性设置初始选中项的索引值
 
 ```html
-<van-picker columns="{{ columns }}" />
-```
-
-```javascript
-Page({
-  data: {
-    columns: [
-      { text: '杭州', disabled: true },
-      { text: '宁波' },
-      { text: '温州' }
-    ]
-  }
-});
+<van-picker
+  columns="{{ columns }}"
+  default-index="{{ 2 }}"
+  bind:change="onChange"
+/>
 ```
 
 #### 展示顶部栏
@@ -75,6 +70,8 @@ Page({
 
 ```javascript
 import Toast from 'path/to/vant-weapp/dist/toast/toast';
+// es5
+const Toast = require('path/to/vant-weapp/lib/toast/toast');
 
 Page({
   data: {
@@ -92,6 +89,26 @@ Page({
 });
 ```
 
+#### 禁用选项
+
+选项可以为对象结构，通过设置 disabled 来禁用该选项
+
+```html
+<van-picker columns="{{ columns }}" />
+```
+
+```javascript
+Page({
+  data: {
+    columns: [
+      { text: '杭州', disabled: true },
+      { text: '宁波' },
+      { text: '温州' }
+    ]
+  }
+});
+```
+
 #### 多列联动
 
 ```html
@@ -135,17 +152,18 @@ Page({
 
 ### API
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|------|------|------|------|------|
-| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
-| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
-| title | 顶部栏标题 | `String` | `''` | - |
-| loading | 是否显示加载状态 | `Boolean` | `false` | - |
-| value-key | 选项对象中，文字对应的 key | `String` | `text` | - |
-| item-height | 选项高度 | `Number` | `44` | - |
-| confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
-| cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
-| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` |
+| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` |
+| title | 顶部栏标题 | `String` | `''` |
+| loading | 是否显示加载状态 | `Boolean` | `false` |
+| value-key | 选项对象中，文字对应的 key | `String` | `text` |
+| item-height | 选项高度 | `Number` | `44` |
+| confirm-button-text | 确认按钮文字 | `String` | `确认` |
+| cancel-button-text | 取消按钮文字 | `String` | `取消` |
+| visible-item-count | 可见的选项个数 | `Number` | `5` |
+| default-index | 单列选择器的默认选中项索引，<br>多列选择器请参考下方的 Columns 配置 | `Number` | `0` |
 
 ### Event
 

packages/picker/index.ts

@@ -1,35 +1,29 @@
 import { VantComponent } from '../common/component';
+import { pickerProps } from './shared';
 
-function isSimple(columns) {
-  return columns.length && !columns[0].values;
+interface Column {
+  values: object[];
+  defaultIndex?: number;
 }
 
 VantComponent({
   classes: ['active-class', 'toolbar-class', 'column-class'],
 
   props: {
-    title: String,
-    loading: Boolean,
-    showToolbar: Boolean,
-    confirmButtonText: String,
-    cancelButtonText: String,
-    visibleItemCount: {
-      type: Number,
-      value: 5
-    },
+    ...pickerProps,
     valueKey: {
       type: String,
       value: 'text'
     },
-    itemHeight: {
+    defaultIndex: {
       type: Number,
-      value: 44
+      value: 0
     },
     columns: {
       type: Array,
       value: [],
       observer(columns = []) {
-        this.simple = isSimple(columns);
+        this.simple = columns.length && !columns[0].values;
         this.children = this.selectAllComponents('.van-picker__column');
 
         if (Array.isArray(this.children) && this.children.length) {
@@ -49,7 +43,7 @@ VantComponent({
     setColumns() {
       const { data } = this;
       const columns = this.simple ? [{ values: data.columns }] : data.columns;
-      const stack = columns.map((column, index: number) =>
+      const stack = columns.map((column: Column, index: number) =>
         this.setColumnValues(index, column.values)
       );
       return Promise.all(stack);
@@ -137,7 +131,8 @@ VantComponent({
         return Promise.reject('setColumnValues: 对应列不存在');
       }
 
-      const isSame = JSON.stringify(column.data.options) === JSON.stringify(options);
+      const isSame =
+        JSON.stringify(column.data.options) === JSON.stringify(options);
 
       if (isSame) {
         return Promise.resolve();

packages/picker/index.wxml

@@ -10,7 +10,7 @@
       data-type="cancel"
       bindtap="emit"
     >
-      {{ cancelButtonText || '取消' }}
+      {{ cancelButtonText }}
     </view>
     <view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ title }}</view>
     <view
@@ -20,7 +20,7 @@
       data-type="confirm"
       bindtap="emit"
     >
-      {{ confirmButtonText || '确认' }}
+      {{ confirmButtonText }}
     </view>
   </view>
   <view wx:if="{{ loading }}" class="van-picker__loading">
@@ -37,7 +37,7 @@
       class="van-picker__column"
       value-key="{{ valueKey }}"
       initial-options="{{ isSimple(columns) ? item : item.values }}"
-      default-index="{{ item.defaultIndex }}"
+      default-index="{{ item.defaultIndex || defaultIndex }}"
       item-height="{{ itemHeight }}"
       visible-item-count="{{ visibleItemCount }}"
       custom-class="column-class"

packages/picker/shared.ts

@@ -0,0 +1,21 @@
+export const pickerProps = {
+  title: String,
+  loading: Boolean,
+  showToolbar: Boolean,
+  cancelButtonText: {
+    type: String,
+    value: '取消'
+  },
+  confirmButtonText: {
+    type: String,
+    value: '确认'
+  },
+  visibleItemCount: {
+    type: Number,
+    value: 5
+  },
+  itemHeight: {
+    type: Number,
+    value: 44
+  }
+};