[new feature] Notify: add onClick event

This commit is contained in:
陈嘉涵 2019-05-01 09:17:59 +08:00
parent 848786dd6e
commit 210122d518
8 changed files with 34 additions and 3 deletions

View File

@ -63,6 +63,10 @@
- 新增`text-size`属性 - 新增`text-size`属性
- 支持`Number`类型的`size`属性 - 支持`Number`类型的`size`属性
### Notify
- 新增`onClick`属性
### NoticeBar ### NoticeBar
- 新增`left-icon`插槽 - 新增`left-icon`插槽

View File

@ -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}

View File

@ -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!!!')
}); });
} }
} }

View File

@ -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` | - |

View File

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

View File

@ -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();
});

View File

@ -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
View File

@ -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 {