el-dialog点击关闭事件案例
时间: 2023-06-09 15:06:46 浏览: 254
好的,对于 el-dialog 点击关闭事件案例,您可以参考以下代码:
```html
<template>
<div>
<el-button type="primary" @click="dialogVisible = true">打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
:before-close="handleClose"
>
<span>这里是一些消息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return {
dialogVisible: false
}
},
methods: {
handleClose (done) {
this.$confirm('确认关闭?')
.then(_ => {
done()
})
.catch(_ => {})
}
}
}
</script>
```
这里的关键在于 el-dialog 的 before-close 属性,它可以注册一个回调函数,在 Dialog 关闭之前做一些特殊的处理。在这个例子中,我们通过确认框的方式让用户确认是否真的要关闭 Dialog。当用户点击确定后,我们再调用 done() 方法,让 Dialog 真正关闭。
阅读全文