From 5abce7d8001687de44772f344d944d300f14c5ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E5=A5=95?= Date: Tue, 25 Apr 2017 17:28:40 +0800 Subject: [PATCH] Dialog: add before-close (#4423) --- examples/docs/en-US/dialog.md | 25 +++++++++++++++++++++++-- examples/docs/zh-CN/dialog.md | 25 +++++++++++++++++++++++-- packages/dialog/src/component.vue | 13 ++++++++++--- packages/select/src/select.vue | 4 +++- 4 files changed, 59 insertions(+), 8 deletions(-) diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md index 65e0b3bff..5729f0a1c 100644 --- a/examples/docs/en-US/dialog.md +++ b/examples/docs/en-US/dialog.md @@ -38,6 +38,13 @@ methods: { openDialog() { this.$refs.dialogBind.open(); + }, + handleClose(done) { + this.$confirm('Are you sure to close this dialog?') + .then(_ => { + done(); + }) + .catch(_ => {}); } } }; @@ -51,12 +58,16 @@ Informs users while preserving the current page state. Dialog pops up a dialog box, and it's quite customizable. -:::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog. +:::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog. Finally, this example demonstrates how `before-close` is used. ```html click to open the Dialog - + This is a message Cancel @@ -70,6 +81,15 @@ Dialog pops up a dialog box, and it's quite customizable. return { dialogVisible: false }; + }, + methods: { + handleClose(done) { + this.$confirm('Are you sure to close this dialog?') + .then(_ => { + done(); + }) + .catch(_ => {}); + } } }; @@ -170,6 +190,7 @@ The content of Dialog can be anything, even a table or a form. This example show | close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean | — | true | | close-on-press-escape | whether the Dialog can be closed by pressing ESC | boolean | — | true | | show-close | whether to show a close button | boolean | — | true | +| before-close | callback before Dialog closes, and it will prevent Dialog from closing | function(done)，done is used to close the Dialog | — | — | ### Slot diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md index 9083b2c96..08fcd6043 100644 --- a/examples/docs/zh-CN/dialog.md +++ b/examples/docs/zh-CN/dialog.md @@ -38,6 +38,13 @@ methods: { openDialog() { this.$refs.dialogBind.open(); + }, + handleClose(done) { + this.$confirm('确认关闭？') + .then(_ => { + done(); + }) + .catch(_ => {}); } } }; @@ -72,12 +79,16 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。 -:::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。本例通过显式改变`v-model`的值来打开 Dialog，此外我们还为 Dialog 实例提供了`open`和`close`方法，可以通过调用它们来打开/关闭 Dialog。 +:::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。本例通过显式改变`v-model`的值来打开 Dialog，此外我们还为 Dialog 实例提供了`open`和`close`方法，可以通过调用它们来打开/关闭 Dialog。最后，本例还展示了`beforeClose`的用法。 ```html 点击打开 Dialog - + 这是一段信息 取 消 @@ -91,6 +102,15 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。 return { dialogVisible: false }; + }, + methods: { + handleClose(done) { + this.$confirm('确认关闭？') + .then(_ => { + done(); + }) + .catch(_ => {}); + } } }; @@ -189,6 +209,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true | | close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true | | show-close | 是否显示关闭按钮 | boolean | — | true | +| before-close | 关闭前的回调，会暂停 Dialog 的关闭 | function(done)，done 用于关闭 Dialog | — | — | ### Slot | name | 说明 | diff --git a/packages/dialog/src/component.vue b/packages/dialog/src/component.vue index cc2a6a666..0ab2a1a5e 100644 --- a/packages/dialog/src/component.vue +++ b/packages/dialog/src/component.vue @@ -11,7 +11,7 @@ {{title}}
- +
@@ -81,7 +81,8 @@ top: { type: String, default: '15%' - } + }, + beforeClose: Function }, data() { return { @@ -119,7 +120,13 @@ methods: { handleWrapperClick() { - if (this.closeOnClickModal) { + if (!this.closeOnClickModal) return; + this.handleClose(); + }, + handleClose() { + if (typeof this.beforeClose === 'function') { + this.beforeClose(this.close); + } else { this.close(); } }, diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index c74449d93..f39c87f8b 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -165,7 +165,9 @@ props: { name: String, - value: {}, + value: { + required: true + }, size: String, disabled: Boolean, clearable: Boolean,