mirror of https://github.com/ElemeFE/element
Dialog: add before-close (#4423)
杨奕
baiyaaaaa
parent
ed4b666167
commit
5abce7d800
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 | 说明 |
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -165,7 +165,9 @@
|
|||
|
||||
props: {
|
||||
name: String,
|
||||
value: {},
|
||||
value: {
|
||||
required: true
|
||||
},
|
||||
size: String,
|
||||
disabled: Boolean,
|
||||
clearable: Boolean,
|
||||
|
|
|
|||
Loading…
Reference in New Issue