Element -ui Dialog 拖拽并操作底层BOM

前言：根据用户需求 ，需要参考详情可以操作其他Dom上的功能。

 一.首先实现可拖拽功能

  <el-dialog
      :modal='false'   <!--是否需要遮罩层 必加项-->
      :close-on-click-modal="false"  <!--点击dialog外关闭  必加项-->
      :visible.sync="checkOrder"   <!--自己弹窗显示状态-->
      width="80%"
      v-dialogDrag  <!--拖拽-->
    >

     <div>
        <!--内容 -->
     </div>
  </el-dialog>

二、创建一个AdjustmentDialog.js

import Vue from 'vue'
//   给elementUI的dialog上加上 v-dialogDrags
// v-dialogDrags: 弹窗拖拽属性 兼容ie,谷歌 
Vue.directive('dialogDrags', { // 属性名称dialogDrags，前面加v- 使用
  bind (el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cssText += ';cursor:move;'
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    })()
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop
      const screenWidth = document.body.clientWidth // body当前宽度
      const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)
      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
      const dragDomheight = dragDom.offsetHeight // 对话框高度
      // 获取到的值带px 正则匹配替换
      let styL = sty(dragDom, 'left')
      let styT = sty(dragDom, 'top')
      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      };
      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        let left = e.clientX - disX + styL
        let top = e.clientY - disY + styT
        // 边界处理
        if (left < 0) {
          left = 0
        }
        if (left > screenWidth - dragDomWidth) {
          left = screenWidth - dragDomWidth
        }
        if (top < 0) {
          top = 0
        }
        if (top > screenHeight - dragDomheight) {
          top = screenHeight - dragDomheight
        }
        // 移动当前元素
        dragDom.style.cssText += `;left:${left}px;top:${top}px;`
      }
      document.onmouseup = function (e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

 三、引入页面

import './AdjustmentDialog.js';

 四、穿刺下层元素 使用css3属性 pointer-events

1.pointer-events:none
元素永远不会成为鼠标事件的target。可当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素 ，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
穿透本元素，作用于下层的元素；

1.pointer-events:auto
与pointer-events属性未指定时的表现效果相同

// 覆盖层元素增加可穿透点击事件
/deep/.el-dialog__wrapper{
  pointer-events:none;
}
   
// 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）
/deep/.el-dialog{
  pointer-events:auto;
}