[new feature] Toast: add onClose prop (#2964)

This commit is contained in:
neverland 2019-03-13 20:16:39 +08:00 committed by GitHub
parent a4eedac8b1
commit 2e7ca412ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 5 deletions

View File

@ -106,4 +106,5 @@ toast2.clear();
| loadingType | Loading icon type, can be set to `spinner` | `String` | `circular` |
| duration | Toast duration(ms), won't disappear if value is 0 | `Number` | `3000` |
| className | Custom className | `String | Array | Object` | - |
| get-container | Return the mount node for Toast | `String | () => HTMLElement` | `body` |
| onClose | onClose callback function | `Function` | - |
| getContainer | Return the mount node for Toast | `String | () => HTMLElement` | `body` |

View File

@ -8,6 +8,7 @@ const defaultOptions = {
value: true,
message: '',
className: '',
onClose: null,
duration: 3000,
position: 'middle',
forbidClick: false,
@ -52,6 +53,10 @@ function Toast(options = {}) {
clear() {
toast.value = false;
if (options.onClose) {
options.onClose();
}
if (!singleton && !isServer) {
clearTimeout(toast.timer);
queue = queue.filter(item => item !== toast);

View File

@ -73,3 +73,16 @@ test('toast duration 0', () => {
expect(toast.timer).toBeFalsy();
Toast.allowMultiple(false);
});
test('onClose callback', () => {
Toast.allowMultiple();
const onClose = jest.fn();
const toast = Toast({
message: 'toast',
onClose
});
toast.clear();
Toast.allowMultiple(false);
expect(onClose.mock.calls.length).toEqual(1);
});

View File

@ -96,11 +96,12 @@ toast2.clear();
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| type | 提示类型,可选值为 `loading` `success`<br>`fail` `html` | `String` | `text` | - |
| position | 位置,可选值为 `top` `middle` `bottom` | `String` | `middle` | - |
| position | 位置,可选值为 `top` `bottom` | `String` | `middle` | - |
| message | 内容 | `String` | `''` | - | - |
| mask | 是否显示背景蒙层 | `Boolean` | `false` | - |
| forbidClick | 是否禁止背景点击 | `Boolean` | `false` | - |
| loadingType | 加载图标类型, 可选值为 `spinner` | `String` | `circular` | 1.1.3 |
| duration | 展示时长(ms),值为 0 时toast 不会消失 | `Number` | `3000` | - |
| className | 自定义类名 | `String | Array | Object` | - | 1.6.0 |
| onClose | 关闭时的回调函数 | `Function` | - | 1.6.10 |
| getContainer | 指定挂载的节点,可以传入选择器,<br>或一个返回节点的函数 | `String | () => HTMLElement` | `body` | 1.6.3 |

7
types/toast.d.ts vendored
View File

@ -9,6 +9,7 @@ export type ToastOptions = {
position?: string;
duration?: number;
className?: any;
onClose?(): void;
forbidClick?: boolean;
loadingType?: string;
message?: ToastMessage;
@ -23,7 +24,7 @@ export interface VanToast extends Vue, VanPopupMixin {
clear(): void;
}
export interface Toast {
export interface IToast {
(message: ToastOptions | ToastMessage, options?: ToastOptions): VanToast;
loading(options?: ToastOptions | ToastMessage): VanToast;
success(options?: ToastOptions | ToastMessage): VanToast;
@ -37,8 +38,8 @@ export interface Toast {
declare module 'vue/types/vue' {
interface Vue {
$toast: Toast
$toast: IToast
}
}
export const Toast: Toast;
export const Toast: IToast;