breaking change(Picker): adjust change event param

This commit is contained in:
chenjiahan 2020-08-21 00:12:48 +08:00
parent af7e7fe9df
commit 036eb8543c
5 changed files with 22 additions and 15 deletions

View File

@ -134,6 +134,7 @@ export default {
};
```
### Picker 参数调整
### Picker
在 Picker 的级联选择下confirm/change 事件返回的回调参数将包含为完整的选项对象。
- 移除 change 事件的第一个参数picker 实例)
- 级联选择下confirm/change 事件返回的回调参数将包含为完整的选项对象。

View File

@ -42,7 +42,7 @@ export default {
onConfirm(value, index) {
Toast(`Value: ${value}, Index: ${index}`);
},
onChange(picker, value, index) {
onChange(value, index) {
Toast(`Value: ${value}, Index: ${index}`);
},
onCancel() {
@ -149,7 +149,13 @@ export default {
### Set Column Values
```html
<van-picker show-toolbar title="Title" :columns="columns" @change="onChange" />
<van-picker
ref="picker"
show-toolbar
title="Title"
:columns="columns"
@change="onChange"
/>
```
```js
@ -165,8 +171,8 @@ export default {
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, states[values[0]]);
onChange(values) {
this.$refs.picker.setColumnValues(1, states[values[0]]);
},
},
};

View File

@ -50,7 +50,7 @@ export default {
onConfirm(value, index) {
Toast(`当前值:${value}, 当前索引:${index}`);
},
onChange(picker, value, index) {
onChange(value, index) {
Toast(`当前值:${value}, 当前索引:${index}`);
},
onCancel() {
@ -171,7 +171,7 @@ export default {
通过 Picker 上的实例方法可以更灵活地控制选择器,比如使用`setColumnValues`方法实现多列联动
```html
<van-picker show-toolbar :columns="columns" @change="onChange" />
<van-picker ref="picker" show-toolbar :columns="columns" @change="onChange" />
```
```js
@ -187,8 +187,8 @@ export default {
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, cities[values[0]]);
onChange(values) {
this.$refs.picker.setColumnValues(1, cities[values[0]]);
},
},
};
@ -288,7 +288,7 @@ export default {
| --- | --- | --- |
| confirm | 点击完成按钮时触发 | 单列:选中值,选中值对应的索引<br>多列:所有列选中值,所有列选中值对应的索引 |
| cancel | 点击取消按钮时触发 | 单列:选中值,选中值对应的索引<br>多列:所有列选中值,所有列选中值对应的索引 |
| change | 选项改变时触发 | 单列:Picker 实例,选中值,选中值对应的索引<br>多列:Picker 实例,所有列选中值,当前列对应的索引 |
| change | 选项改变时触发 | 单列:选中值,选中值对应的索引<br>多列:所有列选中值,当前列对应的索引 |
### Slots

View File

@ -47,6 +47,7 @@
<demo-block card :title="t('setColumnValues')">
<van-picker
ref="picker"
show-toolbar
:title="t('title')"
:columns="columns"
@ -173,8 +174,8 @@ export default {
this.$toast(this.t('toastContent', value, index));
},
onChange2(picker, values) {
picker.setColumnValues(1, this.t('column3')[values[0]]);
onChange2(values) {
this.$refs.picker.setColumnValues(1, this.t('column3')[values[0]]);
},
onConfirm(value, index) {

View File

@ -137,12 +137,11 @@ export default createComponent({
if (this.dataType === 'text') {
this.$emit(
'change',
this,
this.getColumnValue(0),
this.getColumnIndex(0)
);
} else {
this.$emit('change', this, this.getValues(), columnIndex);
this.$emit('change', this.getValues(), columnIndex);
}
},