vue2中elementUI如何关闭弹框
时间: 2023-06-24 15:06:47 浏览: 215
在 ElementUI 中关闭弹框可以使用 `this.$refs` 获取到弹框组件的实例,然后调用其 `close()` 方法即可。
具体实现步骤如下:
1. 在弹框组件上添加 `ref` 属性,如 `<el-dialog ref="dialog">`;
2. 在需要关闭弹框的地方,使用 `this.$refs.dialog.close()` 调用弹框组件的 `close()` 方法即可。
示例代码如下:
```vue
<template>
<div>
<el-button @click="openDialog">打开弹框</el-button>
<el-dialog ref="dialog" title="提示">
<span>这是一个弹框</span>
<span slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="confirmDialog">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
methods: {
openDialog() {
this.$refs.dialog.open();
},
closeDialog() {
this.$refs.dialog.close();
},
confirmDialog() {
// 确定操作
this.$refs.dialog.close();
}
}
}
</script>
```
阅读全文
相关推荐

















