diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md index 3565171bf..1e3a92975 100644 --- a/docs/markdown/v2-progress-tracking.md +++ b/docs/markdown/v2-progress-tracking.md @@ -63,6 +63,10 @@ - 新增`text-size`属性 - 支持`Number`类型的`size`属性 +### Notify + +- 新增`onClick`属性 + ### NoticeBar - 新增`left-icon`插槽 diff --git a/packages/notify/Notify.tsx b/packages/notify/Notify.tsx index 70a87a075..9dc85a2fb 100644 --- a/packages/notify/Notify.tsx +++ b/packages/notify/Notify.tsx @@ -41,6 +41,9 @@ function Notify( onInput={(value: boolean) => { emit(ctx, 'input', value); }} + onClick={(event: Event) => { + emit(ctx, 'click', event); + }} {...inherit(ctx)} > {props.message} diff --git a/packages/notify/demo/index.vue b/packages/notify/demo/index.vue index bd8fad6b9..18cd76edf 100644 --- a/packages/notify/demo/index.vue +++ b/packages/notify/demo/index.vue @@ -42,7 +42,8 @@ export default { this.$notify({ message: this.$t('content'), duration: 1000, - background: '#1989fa' + background: '#1989fa', + onClick: () => this.$toast('click!!!') }); } } diff --git a/packages/notify/en-US.md b/packages/notify/en-US.md index 4b1c6a43a..3f4a8652d 100644 --- a/packages/notify/en-US.md +++ b/packages/notify/en-US.md @@ -56,3 +56,4 @@ export default { | color | Message color | `String` | `#fff` | | | background | Background color | `String` | `#f44` | | className | Custom className | `String | Array | Object` | - | +| onClick | Click callback | `Function` | - | diff --git a/packages/notify/index.ts b/packages/notify/index.ts index a67e731e8..feee3451a 100644 --- a/packages/notify/index.ts +++ b/packages/notify/index.ts @@ -19,7 +19,15 @@ function Notify(options: NotifyOptions) { } if (!instance) { - instance = mount(VanNotify); + instance = mount(VanNotify, { + on: { + click(event: Event) { + if (instance.onClick) { + instance.onClick(event); + } + } + } + }); } options = { @@ -44,7 +52,8 @@ function defaultOptions(): NotifyOptions { color: WHITE, background: RED, duration: 3000, - className: '' + className: '', + onClick: null }; } diff --git a/packages/notify/test/index.spec.js b/packages/notify/test/index.spec.js index c0de7bee2..88efb6e8b 100644 --- a/packages/notify/test/index.spec.js +++ b/packages/notify/test/index.spec.js @@ -47,3 +47,14 @@ test('set default options', () => { expect(Notify().duration).toEqual(3000); Notify.clear(); }); + +test('onClick prop', async () => { + const onClick = jest.fn(); + const notify = Notify({ + message: 'test', + onClick + }); + + notify.$el.click(); + expect(onClick).toHaveBeenCalled(); +}); diff --git a/packages/notify/zh-CN.md b/packages/notify/zh-CN.md index 58aa99e0a..01225e518 100644 --- a/packages/notify/zh-CN.md +++ b/packages/notify/zh-CN.md @@ -55,3 +55,4 @@ export default { | color | 字体颜色 | `String` | `#fff` | 1.4.7 | | background | 背景颜色 | `String` | `#f44` | 1.4.7 | | className | 自定义类名 | `String | Array | Object` | - | 1.6.0 | +| onClick | 点击时的回调函数 | `Function` | - | 2.0.0 | diff --git a/types/notify.d.ts b/types/notify.d.ts index 974b316f8..a17563378 100644 --- a/types/notify.d.ts +++ b/types/notify.d.ts @@ -9,6 +9,7 @@ export type NotifyOptions = { duration?: number; className?: any; background?: string; + onClick?: ((event: Event) => void) | null; } export interface VanNotify extends Vue {