Dialog: add before-close (#4423)

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
 <el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
 
-<el-dialog title="Tips" v-model="dialogVisible" size="tiny">
+<el-dialog
+  title="Tips"
+  v-model="dialogVisible"
+  size="tiny"
+  :before-close="handleClose">
   <span>This is a message</span>
   <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">Cancel</el-button>
@@ -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(_ => {});
+      }
     }
   };
 </script>
@@ -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
 

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
 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
 
-<el-dialog title="提示" v-model="dialogVisible" size="tiny">
+<el-dialog
+  title="提示"
+  v-model="dialogVisible"
+  size="tiny"
+  :before-close="handleClose">
   <span>这是一段信息</span>
   <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
@@ -91,6 +102,15 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。
       return {
         dialogVisible: false
       };
+    },
+    methods: {
+      handleClose(done) {
+        this.$confirm('确认关闭？')
+          .then(_ => {
+            done();
+          })
+          .catch(_ => {});
+      }
     }
   };
 </script>
@@ -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 | 说明 |

packages/dialog/src/component.vue

@@ -11,7 +11,7 @@
             <span class="el-dialog__title">{{title}}</span>
           </slot>
           <div class="el-dialog__headerbtn">
-            <i v-if="showClose" class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
+            <i v-if="showClose" class="el-dialog__close el-icon el-icon-close" @click='handleClose'></i>
           </div>
         </div>
         <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
@@ -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();
         }
       },

packages/select/src/select.vue

@@ -165,7 +165,9 @@
 
     props: {
       name: String,
-      value: {},
+      value: {
+        required: true
+      },
       size: String,
       disabled: Boolean,
       clearable: Boolean,