elementUI 的el-dialog作为子组件,父组件如何控制其关闭的按钮
时间: 2023-10-04 19:09:51 浏览: 195
在 ElementUI 的 el-dialog 组件中,关闭按钮可以通过 `close-on-click-modal` 和 `close-on-press-escape` 这两个属性来控制是否开启点击模态框和按下 ESC 键时关闭对话框的功能。
如果需要在父组件中控制关闭对话框的按钮,可以在父组件中使用 `ref` 获取到 el-dialog 组件的实例,然后通过调用实例的 `close()` 方法来关闭对话框,例如:
```html
<template>
<div>
<el-button @click="showDialog">打开对话框</el-button>
<el-dialog ref="dialog" :visible.sync="dialogVisible" title="对话框标题">
<!-- 对话框内容 -->
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
}
},
methods: {
showDialog() {
this.dialogVisible = true
},
closeDialog() {
this.$refs.dialog.close()
}
}
}
</script>
```
在上面的示例中,通过 `ref="dialog"` 给 el-dialog 组件起了一个名字,然后可以在 `closeDialog()` 方法中通过 `this.$refs.dialog` 获取到 el-dialog 组件的实例,进而调用 `close()` 方法来关闭对话框。
阅读全文