mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
breaking change(Picker): adjust change event param
This commit is contained in:
parent
af7e7fe9df
commit
036eb8543c
@ -134,6 +134,7 @@ export default {
|
||||
};
|
||||
```
|
||||
|
||||
### Picker 参数调整
|
||||
### Picker
|
||||
|
||||
在 Picker 的级联选择下,confirm/change 事件返回的回调参数将包含为完整的选项对象。
|
||||
- 移除 change 事件的第一个参数(picker 实例)
|
||||
- 级联选择下,confirm/change 事件返回的回调参数将包含为完整的选项对象。
|
||||
|
@ -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]]);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -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
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user