mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 06:31:45 +08:00
[new feature] Notify: add onClick event
This commit is contained in:
parent
848786dd6e
commit
210122d518
@ -63,6 +63,10 @@
|
|||||||
- 新增`text-size`属性
|
- 新增`text-size`属性
|
||||||
- 支持`Number`类型的`size`属性
|
- 支持`Number`类型的`size`属性
|
||||||
|
|
||||||
|
### Notify
|
||||||
|
|
||||||
|
- 新增`onClick`属性
|
||||||
|
|
||||||
### NoticeBar
|
### NoticeBar
|
||||||
|
|
||||||
- 新增`left-icon`插槽
|
- 新增`left-icon`插槽
|
||||||
|
@ -41,6 +41,9 @@ function Notify(
|
|||||||
onInput={(value: boolean) => {
|
onInput={(value: boolean) => {
|
||||||
emit(ctx, 'input', value);
|
emit(ctx, 'input', value);
|
||||||
}}
|
}}
|
||||||
|
onClick={(event: Event) => {
|
||||||
|
emit(ctx, 'click', event);
|
||||||
|
}}
|
||||||
{...inherit(ctx)}
|
{...inherit(ctx)}
|
||||||
>
|
>
|
||||||
{props.message}
|
{props.message}
|
||||||
|
@ -42,7 +42,8 @@ export default {
|
|||||||
this.$notify({
|
this.$notify({
|
||||||
message: this.$t('content'),
|
message: this.$t('content'),
|
||||||
duration: 1000,
|
duration: 1000,
|
||||||
background: '#1989fa'
|
background: '#1989fa',
|
||||||
|
onClick: () => this.$toast('click!!!')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -56,3 +56,4 @@ export default {
|
|||||||
| color | Message color | `String` | `#fff` | |
|
| color | Message color | `String` | `#fff` | |
|
||||||
| background | Background color | `String` | `#f44` |
|
| background | Background color | `String` | `#f44` |
|
||||||
| className | Custom className | `String | Array | Object` | - |
|
| className | Custom className | `String | Array | Object` | - |
|
||||||
|
| onClick | Click callback | `Function` | - |
|
||||||
|
@ -19,7 +19,15 @@ function Notify(options: NotifyOptions) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!instance) {
|
if (!instance) {
|
||||||
instance = mount(VanNotify);
|
instance = mount(VanNotify, {
|
||||||
|
on: {
|
||||||
|
click(event: Event) {
|
||||||
|
if (instance.onClick) {
|
||||||
|
instance.onClick(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
options = {
|
options = {
|
||||||
@ -44,7 +52,8 @@ function defaultOptions(): NotifyOptions {
|
|||||||
color: WHITE,
|
color: WHITE,
|
||||||
background: RED,
|
background: RED,
|
||||||
duration: 3000,
|
duration: 3000,
|
||||||
className: ''
|
className: '',
|
||||||
|
onClick: null
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -47,3 +47,14 @@ test('set default options', () => {
|
|||||||
expect(Notify().duration).toEqual(3000);
|
expect(Notify().duration).toEqual(3000);
|
||||||
Notify.clear();
|
Notify.clear();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('onClick prop', async () => {
|
||||||
|
const onClick = jest.fn();
|
||||||
|
const notify = Notify({
|
||||||
|
message: 'test',
|
||||||
|
onClick
|
||||||
|
});
|
||||||
|
|
||||||
|
notify.$el.click();
|
||||||
|
expect(onClick).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
@ -55,3 +55,4 @@ export default {
|
|||||||
| color | 字体颜色 | `String` | `#fff` | 1.4.7 |
|
| color | 字体颜色 | `String` | `#fff` | 1.4.7 |
|
||||||
| background | 背景颜色 | `String` | `#f44` | 1.4.7 |
|
| background | 背景颜色 | `String` | `#f44` | 1.4.7 |
|
||||||
| className | 自定义类名 | `String | Array | Object` | - | 1.6.0 |
|
| className | 自定义类名 | `String | Array | Object` | - | 1.6.0 |
|
||||||
|
| onClick | 点击时的回调函数 | `Function` | - | 2.0.0 |
|
||||||
|
1
types/notify.d.ts
vendored
1
types/notify.d.ts
vendored
@ -9,6 +9,7 @@ export type NotifyOptions = {
|
|||||||
duration?: number;
|
duration?: number;
|
||||||
className?: any;
|
className?: any;
|
||||||
background?: string;
|
background?: string;
|
||||||
|
onClick?: ((event: Event) => void) | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface VanNotify extends Vue {
|
export interface VanNotify extends Vue {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user