elment-plus

拖拽弹框同时可以操作底部页面

<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>