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
+ }
+};