ElementPuls Dialog可拖拽对话框且可操作其他Dom

前言

今天产品提了一个需求 需要一个可拖动弹框并且在不关闭弹框的同时可以操作页面上的功能 写完后分享一下

操作

	// 弹框基础写法 需要关闭遮罩层 打开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实现拖拽且可点击功能。