diff --git a/src/toast/Toast.js b/src/toast/Toast.js index 759228029..57060d1a2 100644 --- a/src/toast/Toast.js +++ b/src/toast/Toast.js @@ -25,6 +25,7 @@ export default createComponent({ overlayClass: null, overlayStyle: Object, closeOnClick: Boolean, + closeOnClickOverlay: Boolean, type: { type: String, default: 'text', @@ -63,6 +64,10 @@ export default createComponent({ clearTimeout(timer); }; + const toggle = (show) => { + emit('update:show', show); + }; + const renderIcon = () => { const { icon, type, iconPrefix, loadingType } = props; const hasIcon = icon || type === 'success' || type === 'fail'; @@ -119,8 +124,10 @@ export default createComponent({ transition={props.transition} overlayClass={props.overlayClass} overlayStyle={props.overlayStyle} + closeOnClickOverlay={props.closeOnClickOverlay} onClick={onClick} onClosed={clearTimer} + {...{ 'onUpdate:show': toggle }} > {renderIcon()} {renderMessage()} diff --git a/src/toast/test/index.legacy.js b/src/toast/test/index.legacy.js index a49dd67b3..c16917fa0 100644 --- a/src/toast/test/index.legacy.js +++ b/src/toast/test/index.legacy.js @@ -166,23 +166,6 @@ test('should trigger onClose callback after closed', () => { Toast.allowMultiple(false); }); -test('closeOnClick option', async () => { - Toast.allowMultiple(); - const toast = Toast({ - message: 'toast', - }); - - await later(); - toast.$el.click(); - expect(toast.value).toBeTruthy(); - - toast.closeOnClick = true; - toast.$el.click(); - expect(toast.value).toBeFalsy(); - - Toast.allowMultiple(false); -}); - test('register component', () => { Vue.use(Toast); expect(Vue.component(ToastVue.name)).toBeTruthy(); diff --git a/src/toast/test/index.spec.js b/src/toast/test/index.spec.js index 837149c2d..ab96603e6 100644 --- a/src/toast/test/index.spec.js +++ b/src/toast/test/index.spec.js @@ -15,3 +15,27 @@ test('should change overlay style after using overlay-style prop', async () => { await later(); expect(wrapper.find('.van-overlay').element.style.background).toEqual('red'); }); + +test('should close Toast when using closeOnClick prop and clicked', () => { + const wrapper = mount(Toast, { + props: { + show: true, + closeOnClick: true, + }, + }); + + wrapper.find('.van-toast').trigger('click'); + expect(wrapper.emitted('update:show')[0][0]).toEqual(false); +}); + +test('should close Toast when using closeOnClickOverlay prop and overlay is clicked', () => { + const wrapper = mount(Toast, { + props: { + show: true, + closeOnClickOverlay: true, + }, + }); + + wrapper.find('.van-overlay').trigger('click'); + expect(wrapper.emitted('update:show')[0][0]).toEqual(false); +});