mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-26 08:19:15 +08:00
[breaking change] Field: renaming icon props、events
This commit is contained in:
parent
1c5c5eaf73
commit
706f047909
@ -14,8 +14,12 @@
|
|||||||
|
|
||||||
### Field
|
### Field
|
||||||
|
|
||||||
- [ ] icon 属性重命名为 right-icon
|
- [x] 移除 onIconClick 属性
|
||||||
- [ ] icon 插槽重命名为 right-icon
|
- [x] icon 属性重命名为 right-icon
|
||||||
|
- [x] icon 插槽重命名为 right-icon
|
||||||
|
- [x] click-icon 事件重命名为 click-right-icon
|
||||||
|
|
||||||
|
改动原因:规范命名,onIconClick 属性可以被 click-right-icon 代替
|
||||||
|
|
||||||
### GoodsAction
|
### GoodsAction
|
||||||
|
|
||||||
|
@ -20,7 +20,6 @@ export default sfc({
|
|||||||
labelWidth: [String, Number],
|
labelWidth: [String, Number],
|
||||||
labelAlign: String,
|
labelAlign: String,
|
||||||
inputAlign: String,
|
inputAlign: String,
|
||||||
onIconClick: Function,
|
|
||||||
autosize: [Boolean, Object],
|
autosize: [Boolean, Object],
|
||||||
errorMessage: String,
|
errorMessage: String,
|
||||||
errorMessageAlign: String,
|
errorMessageAlign: String,
|
||||||
@ -130,10 +129,7 @@ export default sfc({
|
|||||||
},
|
},
|
||||||
|
|
||||||
onClickRightIcon() {
|
onClickRightIcon() {
|
||||||
// compatible old version
|
|
||||||
this.$emit('click-icon');
|
|
||||||
this.$emit('click-right-icon');
|
this.$emit('click-right-icon');
|
||||||
this.onIconClick && this.onIconClick();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onClear(event) {
|
onClear(event) {
|
||||||
@ -220,11 +216,11 @@ export default sfc({
|
|||||||
|
|
||||||
renderRightIcon() {
|
renderRightIcon() {
|
||||||
const { slots } = this;
|
const { slots } = this;
|
||||||
const showRightIcon = slots('right-icon') || slots('icon') || this.rightIcon || this.icon;
|
const showRightIcon = slots('right-icon') || this.rightIcon;
|
||||||
if (showRightIcon) {
|
if (showRightIcon) {
|
||||||
return (
|
return (
|
||||||
<div class={bem('right-icon')} onClick={this.onClickRightIcon}>
|
<div class={bem('right-icon')} onClick={this.onClickRightIcon}>
|
||||||
{slots('right-icon') || slots('icon') || <Icon name={this.rightIcon || this.icon} />}
|
{slots('right-icon') || <Icon name={this.rightIcon} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -44,17 +44,6 @@ exports[`render label slot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`render right icon with icon prop for old version 1`] = `
|
|
||||||
<div class="van-cell van-field">
|
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
|
||||||
<div class="van-field__body"><input type="text" class="van-field__control">
|
|
||||||
<div class="van-field__right-icon"><i class="van-icon van-icon-success">
|
|
||||||
<!----></i></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`render textarea 1`] = `
|
exports[`render textarea 1`] = `
|
||||||
<div class="van-cell van-field">
|
<div class="van-cell van-field">
|
||||||
<div class="van-cell__value van-cell__value--alone">
|
<div class="van-cell__value van-cell__value--alone">
|
||||||
|
@ -11,22 +11,18 @@ test('input event', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('click icon event', () => {
|
test('click icon event', () => {
|
||||||
const onIconClick = jest.fn();
|
|
||||||
const wrapper = mount(Field, {
|
const wrapper = mount(Field, {
|
||||||
propsData: {
|
propsData: {
|
||||||
value: 'a',
|
value: 'a',
|
||||||
leftIcon: 'contact',
|
leftIcon: 'contact',
|
||||||
rightIcon: 'search',
|
rightIcon: 'search'
|
||||||
onIconClick
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.find('.van-field__left-icon').trigger('click');
|
wrapper.find('.van-field__left-icon').trigger('click');
|
||||||
wrapper.find('.van-field__right-icon').trigger('click');
|
wrapper.find('.van-field__right-icon').trigger('click');
|
||||||
expect(wrapper.emitted('click-icon')).toBeTruthy();
|
|
||||||
expect(wrapper.emitted('click-left-icon')).toBeTruthy();
|
expect(wrapper.emitted('click-left-icon')).toBeTruthy();
|
||||||
expect(wrapper.emitted('click-right-icon')).toBeTruthy();
|
expect(wrapper.emitted('click-right-icon')).toBeTruthy();
|
||||||
expect(onIconClick).toHaveBeenCalled();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
test('keypress event', () => {
|
test('keypress event', () => {
|
||||||
@ -179,15 +175,6 @@ test('render label slot', () => {
|
|||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('render right icon with icon prop for old version', () => {
|
|
||||||
const wrapper = mount(Field, {
|
|
||||||
propsData: {
|
|
||||||
icon: 'success'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('size prop', () => {
|
test('size prop', () => {
|
||||||
const wrapper = mount(Field, {
|
const wrapper = mount(Field, {
|
||||||
propsData: {
|
propsData: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user