diff --git a/src/toast/README.md b/src/toast/README.md index 0c40864be..8dffa4320 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -121,6 +121,7 @@ toast2.clear(); | iconPrefix | Icon className prefix | `string` | `van-icon` | | mask | Whether to show mask | `boolean` | `false` | | forbidClick | Whether to forbid click background | `boolean` | `false` | +| closeOnClick | Whether to close after clicked | `boolean` | `false` | | 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 | `any` | - | diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index eed95c6d5..10e5d8ce5 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -121,6 +121,7 @@ toast2.clear(); | iconPrefix | 图标类名前缀 | `string` | `van-icon` | 2.0.9 | | mask | 是否显示背景遮罩层 | `boolean` | `false` | - | | forbidClick | 是否禁止背景点击 | `boolean` | `false` | - | +| closeOnClick | 是否在点击后关闭 | `boolean` | `false` | 2.1.5 | | loadingType | 加载图标类型, 可选值为 `spinner` | `string` | `circular` | - | | duration | 展示时长(ms),值为 0 时,toast 不会消失 | `number` | `3000` | - | | className | 自定义类名 | `any` | - | 1.6.0 | diff --git a/src/toast/Toast.js b/src/toast/Toast.js index cfd3b611d..e997ad2b3 100644 --- a/src/toast/Toast.js +++ b/src/toast/Toast.js @@ -14,6 +14,7 @@ export default createComponent({ iconPrefix: String, loadingType: String, forbidClick: Boolean, + closeOnClick: Boolean, message: [Number, String], type: { type: String, @@ -49,8 +50,15 @@ export default createComponent({ }, methods: { + onClick() { + if (this.closeOnClick) { + this.close(); + } + }, + toggleClickable() { const clickable = this.value && this.forbidClick; + if (this.clickable !== clickable) { this.clickable = clickable; const action = clickable ? 'add' : 'remove'; @@ -111,6 +119,7 @@ export default createComponent({ bem([this.position, { text: !hasIcon && type !== 'loading' }]), this.className ]} + onClick={this.onClick} > {ToastIcon()} {Message()} diff --git a/src/toast/index.js b/src/toast/index.js index c49ea9aa9..6d1525c01 100644 --- a/src/toast/index.js +++ b/src/toast/index.js @@ -17,7 +17,8 @@ const defaultOptions = { forbidClick: false, loadingType: undefined, getContainer: 'body', - overlayStyle: null + overlayStyle: null, + closeOnClick: false }; let queue = []; @@ -44,6 +45,11 @@ function createInstance() { const toast = new (Vue.extend(VueToast))({ el: document.createElement('div') }); + + toast.$on('input', value => { + toast.value = value; + }); + queue.push(toast); } diff --git a/src/toast/test/index.spec.js b/src/toast/test/index.spec.js index a3071a0bf..c469720ec 100644 --- a/src/toast/test/index.spec.js +++ b/src/toast/test/index.spec.js @@ -140,8 +140,23 @@ test('onClose callback', () => { }); toast.clear(); - Toast.allowMultiple(false); expect(onClose).toHaveBeenCalledTimes(1); + Toast.allowMultiple(false); +}); + +test('closeOnClick option', async () => { + Toast.allowMultiple(); + const toast = Toast({ + message: 'toast', + closeOnClick: true + }); + + await later(); + toast.$el.click(); + + await later(); + expect(toast.value).toBeFalsy(); + Toast.allowMultiple(false); }); test('register component', () => { diff --git a/types/toast.d.ts b/types/toast.d.ts index f40c6d4c2..e73ed9197 100644 --- a/types/toast.d.ts +++ b/types/toast.d.ts @@ -13,6 +13,7 @@ export type ToastOptions = { onClose?(): void; onOpened?(): void; forbidClick?: boolean; + closeOnClick?: boolean; loadingType?: string; message?: ToastMessage; getContainer?: string | (() => HTMLElement);