diff --git a/example/pages/picker/index.wxml b/example/pages/picker/index.wxml index cb6a1b66..e6b1bfd9 100644 --- a/example/pages/picker/index.wxml +++ b/example/pages/picker/index.wxml @@ -5,9 +5,11 @@ /> - + @@ -22,6 +24,10 @@ /> + + + + 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; diff --git a/packages/picker-column/index.ts b/packages/picker-column/index.ts index 56b511a8..2ce007a2 100644 --- a/packages/picker-column/index.ts +++ b/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(); }, diff --git a/packages/picker/README.md b/packages/picker/README.md index d711e5d1..f3252ddb 100644 --- a/packages/picker/README.md +++ b/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 - -``` - -```javascript -Page({ - data: { - columns: [ - { text: '杭州', disabled: true }, - { text: '宁波' }, - { text: '温州' } - ] - } -}); + ``` #### 展示顶部栏 @@ -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 + +``` + +```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 | 单列选择器的默认选中项索引,
多列选择器请参考下方的 Columns 配置 | `Number` | `0` | ### Event diff --git a/packages/picker/index.ts b/packages/picker/index.ts index 7d356efe..1c41389a 100644 --- a/packages/picker/index.ts +++ b/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(); diff --git a/packages/picker/index.wxml b/packages/picker/index.wxml index 166d59ba..3a30aaf8 100644 --- a/packages/picker/index.wxml +++ b/packages/picker/index.wxml @@ -10,7 +10,7 @@ data-type="cancel" bindtap="emit" > - {{ cancelButtonText || '取消' }} + {{ cancelButtonText }} {{ title }} - {{ confirmButtonText || '确认' }} + {{ confirmButtonText }} @@ -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" diff --git a/packages/picker/shared.ts b/packages/picker/shared.ts new file mode 100644 index 00000000..3142f2f5 --- /dev/null +++ b/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 + } +};