前言
今天产品提了一个需求 需要一个可拖动弹框并且在不关闭弹框的同时可以操作页面上的功能 写完后分享一下
操作
// 弹框基础写法 需要关闭遮罩层 打开draggable功能实现拖拽
<el-dialog
draggable
v-model="dialogShow"
destroy-on-close
@close="clear"
:modal="false"
:close-on-click-modal="false"
class="pointer"
:title="title"
>
<div>
内容......
</div>
</el-dialog>
<script setup lang="ts">
import { onMounted} from "vue";
onMounted(() => {
var box = document.querySelector(".el-overlay-dialog");
// 获取.el-overlay-dialog父级
var boxa = box.parentNode;
// 使用pointerEvents 进行页面穿透
boxa.style.pointerEvents = "none";
});
</script>
<style scoped lang="scss">
.pointer {
pointer-events: auto !important;
}
</style>
结语
本来认为很容易的功能，但是在使用pointerEvents属性进行页面穿透时，发现elementPlus Dialog弹框把穿透放在.el–overlay–dialog类上没有效果，最后看了一个控制台，发现在.el–overlay–dialog上还有一层div，最后把穿透赋值给最外层div实现拖拽且可点击功能。
原文地址:https://blog.csdn.net/Flippedguky/article/details/128311181
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_32416.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
