diff --git a/src/notify/Notify.js b/src/notify/Notify.tsx similarity index 77% rename from src/notify/Notify.js rename to src/notify/Notify.tsx index 7e8655800..864ec0c38 100644 --- a/src/notify/Notify.js +++ b/src/notify/Notify.tsx @@ -1,17 +1,20 @@ -import { createNamespace } from '../utils'; +import { PropType } from 'vue'; +import { createNamespace, UnknownProp } from '../utils'; import Popup, { popupSharedProps } from '../popup'; const [createComponent, bem] = createNamespace('notify'); +export type NotifyType = 'primary' | 'success' | 'danger' | 'warning'; + export default createComponent({ props: { ...popupSharedProps, color: String, message: [Number, String], - className: null, + className: UnknownProp, background: String, type: { - type: String, + type: String as PropType, default: 'danger', }, }, diff --git a/src/notify/README.md b/src/notify/README.md index 15a21218f..ba2160965 100644 --- a/src/notify/README.md +++ b/src/notify/README.md @@ -107,9 +107,9 @@ export default { | color | Message color | _string_ | `white` | | | background | Background color | _string_ | - | | className | Custom className | _string \| Array \| object_ | - | -| onClick | Callback function after click | _Function_ | - | -| onOpened | Callback function after opened | _Function_ | - | -| onClose | Callback function after close | _Function_ | - | +| onClick | Callback function after click | _(event: MouseEvent) => void_ | - | +| onOpened | Callback function after opened | _() => void_ | - | +| onClose | Callback function after close | _() => void_ | - | ### Less Variables diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md index 1c0a888f4..c3a7506c5 100644 --- a/src/notify/README.zh-CN.md +++ b/src/notify/README.zh-CN.md @@ -144,9 +144,9 @@ export default { | color | 字体颜色 | _string_ | `white` | | background | 背景颜色 | _string_ | - | | className | 自定义类名 | _string \| Array \| object_ | - | -| onClick | 点击时的回调函数 | _Function_ | - | -| onOpened | 完全展示后的回调函数 | _Function_ | - | -| onClose | 关闭时的回调函数 | _Function_ | - | +| onClick | 点击时的回调函数 | _(event: MouseEvent): void_ | - | +| onOpened | 完全展示后的回调函数 | _() => void_ | - | +| onClose | 关闭时的回调函数 | _() => void_ | - | ### 样式变量 diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue index 80240999c..ed8e94d77 100644 --- a/src/notify/demo/index.vue +++ b/src/notify/demo/index.vue @@ -33,6 +33,7 @@ import { ref } from 'vue'; import { useTranslate } from '@demo/use-translate'; import Notify from '..'; +import { NotifyType } from '../Notify'; const i18n = { 'zh-CN': { @@ -85,7 +86,7 @@ export default { }); }; - const showType = (type: string) => { + const showType = (type: NotifyType) => { Notify({ message: t('content'), type, diff --git a/src/notify/index.js b/src/notify/index.tsx similarity index 58% rename from src/notify/index.js rename to src/notify/index.tsx index 39757a346..3a997d98b 100644 --- a/src/notify/index.js +++ b/src/notify/index.tsx @@ -1,11 +1,26 @@ -import { isObject, inBrowser } from '../utils'; +import { App } from 'vue'; +import { isObject, inBrowser, ComponentInstance } from '../utils'; import { mountComponent, usePopupState } from '../utils/mount-component'; -import VanNotify from './Notify'; +import VanNotify, { NotifyType } from './Notify'; -let timer; -let instance; +let timer: number; +let instance: ComponentInstance; -function parseOptions(message) { +export type NotifyMessage = string | number; + +export type NotifyOptions = { + type?: NotifyType; + color?: string; + message?: NotifyMessage; + duration?: number; + className?: unknown; + background?: string; + onClick?: (event: MouseEvent) => void; + onClose?: () => void; + onOpened?: () => void; +}; + +function parseOptions(message: NotifyMessage | NotifyOptions) { return isObject(message) ? message : { message }; } @@ -25,7 +40,7 @@ function initInstance() { })); } -function Notify(options) { +function Notify(options: NotifyMessage | NotifyOptions) { if (!inBrowser) { return; } @@ -42,7 +57,7 @@ function Notify(options) { instance.open(options); clearTimeout(timer); - if (options.duration > 0) { + if (options.duration! > 0) { timer = setTimeout(Notify.clear, options.duration); } @@ -54,13 +69,13 @@ function defaultOptions() { type: 'danger', color: undefined, message: '', - onClose: null, - onClick: null, - onOpened: null, + onClose: undefined, + onClick: undefined, + onOpened: undefined, duration: 3000, className: '', background: undefined, - }; + } as NotifyOptions; } Notify.clear = () => { @@ -71,7 +86,7 @@ Notify.clear = () => { Notify.currentOptions = defaultOptions(); -Notify.setDefaultOptions = (options) => { +Notify.setDefaultOptions = (options: NotifyOptions) => { Object.assign(Notify.currentOptions, options); }; @@ -79,8 +94,8 @@ Notify.resetDefaultOptions = () => { Notify.currentOptions = defaultOptions(); }; -Notify.install = (app) => { - app.use(VanNotify); +Notify.install = (app: App) => { + app.use(VanNotify as any); app.config.globalProperties.$notify = Notify; };