拖拽弹框同时可以操作底部页面
<template>
<el-button text @click="dialogVisible = true" @contextmenu="aaa">
点击这里
</el-button>
<button type="success">哈哈哈哈</button>
<el-dialog :modal="false" v-model="dialogVisible" title="" width="30%" draggable :close-on-click-modal="false" class="message-dialog">
<div>111111</div>
</el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const dialogVisible = ref(false)
onMounted(() => {
var box = document.querySelector(".el-overlay-dialog");
// 获取.el-overlay-dialog父级
var boxa = box.parentNode;
// 使用pointerEvents 进行页面穿透
boxa.style.pointerEvents = "none";
});
const aaa=()=>{
dialogVisible.value = true
event.preventDefault(); //阻止右键菜单默认行为
console.log('我点击右键了');
}
</script>
<style lang="less">
.message-dialog {
.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
pointer-events: auto !important;//还原浏览器设定的默认行为
}
}
:has(> .el-overlay-dialog .message-dialog) {
pointer-events: none !important;//让一个元素忽略鼠标操作
}
</style>