From 6d74198e27633d04fcd1faea7a93cad7c47e78f6 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 17 Apr 2018 14:16:28 +0800 Subject: [PATCH] [Improvement] Dialog: add before-close prop (#881) --- docs/demos/views/dialog.vue | 17 +++++------ docs/markdown/en-US/dialog.md | 14 +++++---- docs/markdown/zh-CN/dialog.md | 21 ++++++++------ packages/dialog/dialog.vue | 53 ++++++++++++++++++----------------- packages/dialog/index.js | 1 + test/specs/dialog.spec.js | 26 +++++++++++++++-- types/dialog.d.ts | 1 + 7 files changed, 82 insertions(+), 51 deletions(-) diff --git a/docs/demos/views/dialog.vue b/docs/demos/views/dialog.vue index 052dad95b..38cc7762d 100644 --- a/docs/demos/views/dialog.vue +++ b/docs/demos/views/dialog.vue @@ -13,7 +13,8 @@ {{ $t('advancedUsage') }} { - setTimeout(() => { - resolve() - }, 1000) - }) + beforeClose(action, done) { + if (action === 'confirm') { + setTimeout(done, 1000); + } else { + done(); + } } } }; diff --git a/docs/markdown/en-US/dialog.md b/docs/markdown/en-US/dialog.md index 66544b325..f2b03d6eb 100644 --- a/docs/markdown/en-US/dialog.md +++ b/docs/markdown/en-US/dialog.md @@ -77,6 +77,7 @@ export default { | overlay | Whether to show overlay | `Boolean` | `true` | - | | closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - | | lockScroll | Whether to lock body scroll | `Boolean` | `true` | - | +| beforeClose | Callback before close，call done to close dialog | (action: string, done: function) => void | - | - | #### Advanced Usage If you need to render vue components within a dialog, you can use dialog component. @@ -110,12 +111,12 @@ export default { }, methods: { - onClickConfirmAsync() { - return new Promise((resolve, reject) => { - setTimeout(() => { - resolve() - }, 1000) - }) + beforeClose() { + if (action === 'confirm') { + setTimeout(done, 1000); + } else { + done(); + } } } } @@ -136,6 +137,7 @@ export default { | overlay | Whether to show overlay | `Boolean` | `true` | - | | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` | - | | lock-scroll | Whether to lock background scroll | `Boolean` | `true` | - | +| before-close | Callback before close，call done to close dialog | (action: string, done: function) => void | - | - | ### Event diff --git a/docs/markdown/zh-CN/dialog.md b/docs/markdown/zh-CN/dialog.md index 06b366a1b..876e55144 100644 --- a/docs/markdown/zh-CN/dialog.md +++ b/docs/markdown/zh-CN/dialog.md @@ -78,13 +78,18 @@ export default { | overlay | 是否展示蒙层 | `Boolean` | `true` | - | | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - | | lockScroll | 是否锁定背景滚动 | `Boolean` | `true` | - | +| beforeClose | 关闭前的回调函数，调用 done 后关闭弹窗 | (action: string, done: function) => void | - | - | #### 高级用法 如果需要在弹窗内实现更复杂的交互，可以通过组件形式来调用 Dialog ```html - + { - setTimeout(() => { - resolve(); - }, 1000) - }); + beforeClose() { + if (action === 'confirm') { + setTimeout(done, 1000); + } else { + done(); + } } } } @@ -130,7 +135,6 @@ export default { | v-model | 是否显示弹窗 | `Boolean` | - | - | | title | 标题 | `String` | - | - | | message | 内容 | `String` | - | - | -| async-confirm | dialog是否异步关闭，传入一个返回Promise的函数，在点击确定时触发。 | `Function` | - | - | | show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` | - | | show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` | - | | confirm-button-text | 确认按钮的文案 | `String` | `确认` | - | @@ -138,6 +142,7 @@ export default { | overlay | 是否展示蒙层 | `Boolean` | `true` | - | | close-on-click-overlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - | | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - | +| before-close | 关闭前的回调函数，调用 done 后关闭弹窗 | (action: string, done: function) => void | - | - | ### Event diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue index c7bd80062..8446fa7e9 100644 --- a/packages/dialog/dialog.vue +++ b/packages/dialog/dialog.vue @@ -9,19 +9,20 @@
{{ cancelButtonText || $t('cancel') }} {{ confirmButtonText || $t('confirm') }} @@ -39,18 +40,6 @@ import Popup from '../mixins/popup'; export default create({ name: 'dialog', - data() { - return { - confirmButtonLoading: false - }; - }, - - watch: { - value(val) { - this.confirmButtonLoading = !val && false; - } - }, - components: { VanButton }, @@ -61,7 +50,7 @@ export default create({ title: String, message: String, callback: Function, - asyncConfirm: Function, + beforeClose: Function, confirmButtonText: String, cancelButtonText: String, showCancelButton: Boolean, @@ -79,19 +68,31 @@ export default create({ } }, + data() { + return { + loading: { + confirm: false, + cancel: false + } + }; + }, + methods: { handleAction(action) { - if ((action === 'confirm') && this.asyncConfirm) { - this.confirmButtonLoading = true; - this.asyncConfirm(action).then(res => { - this.$emit('input', false); - }).catch(err => { - this.confirmButtonLoading = false; + if (this.beforeClose) { + this.loading[action] = true; + this.beforeClose(action, () => { + this.onClose(action); + this.loading[action] = false; }); } else { - this.$emit('input', false); - this.$emit(action); + this.onClose(action); } + }, + + onClose(action) { + this.$emit('input', false); + this.$emit(action); this.callback && this.callback(action); } } diff --git a/packages/dialog/index.js b/packages/dialog/index.js index 4c94fdc4a..fcec9175a 100644 --- a/packages/dialog/index.js +++ b/packages/dialog/index.js @@ -35,6 +35,7 @@ Dialog.defaultOptions = { message: '', overlay: true, lockScroll: true, + beforeClose: null, confirmButtonText: '', cancelButtonText: '', showConfirmButton: true, diff --git a/test/specs/dialog.spec.js b/test/specs/dialog.spec.js index 6f44beabd..36de317f1 100644 --- a/test/specs/dialog.spec.js +++ b/test/specs/dialog.spec.js @@ -7,6 +7,7 @@ describe('Dialog', () => { }); it('create a alert dialog', (done) => { + Dialog.close(); Dialog.alert({ title: 'title', message: 'message' @@ -19,7 +20,7 @@ describe('Dialog', () => { expect(document.querySelector('.van-dialog')).to.exist; expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none'); document.querySelector('.van-dialog__confirm').click(); - }, 500); + }, 300); }); it('create a confirm dialog', (done) => { @@ -35,7 +36,7 @@ describe('Dialog', () => { setTimeout(() => { document.querySelector('.van-dialog__cancel').click(); - }, 500); + }, 300); }); it('create a confirm dialog with callback', (done) => { @@ -48,7 +49,7 @@ describe('Dialog', () => { setTimeout(() => { document.querySelector('.van-dialog__cancel').click(); - }, 500); + }, 300); }); it('set default options', () => { @@ -64,4 +65,23 @@ describe('Dialog', () => { Vue.use(Dialog); expect(!!Vue.component('van-dialog')).to.be.true; }); + + it('before close', (done) => { + Dialog.confirm({ + beforeClose(action, dialogDone) { + setTimeout(() => { + dialogDone(); + setTimeout(() => { + expect(document.querySelector('.van-dialog').style.display).to.equal('none'); + done(); + }, 300); + }); + } + }); + + setTimeout(() => { + document.querySelector('.van-dialog__confirm').click(); + expect(document.querySelector('.van-dialog').style.display).to.equal(''); + }, 300); + }); }); diff --git a/types/dialog.d.ts b/types/dialog.d.ts index 4e316e124..34ad6a435 100644 --- a/types/dialog.d.ts +++ b/types/dialog.d.ts @@ -3,6 +3,7 @@ export type DialogOptions = { message?: string; overlay?: boolean; lockScroll?: boolean; + beforeClose?: (action: string, done: function) => void; confirmButtonText?: string; cancelButtonText?: string; showConfirmButton?: boolean;