:modal="false" // 关闭遮罩层
:close-on-click-modal="false" // 是否可以通过点击 modal 关闭 Dialog 最后设置样式
.el-dialog__wrapper {pointer-events: none;::v-deep .el-dialog {pointer-events: auto;}
}
完整示例：
<!--* @Description: 详情 弹窗* @Author: mhf* @Date: 2025/4/2
-->
<template><el-dialogwidth="600px"v-dialog-outappend-to-bodyv-if="dialogVisible":title="title":visible="dialogVisible":before-close="hideDialog":close-on-click-modal="false":modal="false"><div class="dialog-body">详情</div><lineH /><div class="dialog-footer"><el-button @click="hideDialog">取 消</el-button><el-button type="primary" @click="validateForm">确 定</el-button></div></el-dialog>
</template><script>
export default {name: "resourceDetailsDialog",components: {},props: {},dicts: [],data() {return {dialogVisible: false,title: ""};},methods: {showDialog(data) {this.dialogVisible = true;this.title = data.title;if (data.data) {this.getTableData(data.data);}},hideDialog() {this.dialogVisible = false;},validateForm() {},getTableData(data) {console.log(data, "获取表格数据");}},created() {},mounted() {}
};
</script><style lang="scss" scoped>
::v-deep .el-dialog__body {padding: 20px 0 0 !important;
}.dialog-body {padding: 0 20px;max-height: 65vh;overflow-y: auto;
}.dialog-footer {text-align: center;padding: 10px 0 18px;
}.el-dialog__wrapper {pointer-events: none;::v-deep .el-dialog {pointer-events: auto;}
}
</style>
