el-dialog的before-close用法
时间: 2023-10-08 18:11:53 浏览: 141
【JavaScript源代码】element-ui 弹窗组件封装的步骤.docx
`el-dialog` 是 Element UI 中的一个组件,`before-close` 是其提供的一个事件钩子,用于在关闭 `el-dialog` 之前执行一些操作。具体用法如下:
```html
<template>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
:before-close="handleClose"
>
<span>确定关闭该对话框吗?</span>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="confirmClose">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
handleClose(done) {
this.$confirm("确定关闭该对话框吗?")
.then(() => {
done(); // 关闭对话框
})
.catch(() => {});
},
confirmClose() {
this.dialogVisible = false;
},
},
};
</script>
```
在上面的例子中,我们通过 `:before-close` 绑定了一个名为 `handleClose` 的方法,当用户点击关闭按钮时,会先执行该方法。该方法接收一个 `done` 参数,是一个函数类型,当调用 `done()` 方法时,会关闭对话框。在 `handleClose` 方法中,我们先弹出确认框,用户点击确认后,才会调用 `done()` 方法关闭对话框。如果用户点击取消,则不会关闭对话框。
阅读全文