vue自定义指令elementui弹窗全屏/拖动/拖拽

//加载需要的样式
require("../assets/styles/dialogDrag.scss");
import Vue from 'vue';
// 全屏
Vue.directive('full', {
    bind (el,binding) {
        setTimeout(() => {
            console.log(document.getElementsByClassName("el-dialog"));
            let dialogList = document.getElementsByClassName("el-dialog")
            let dialog = null
            if(dialogList && dialogList.length > 0) {
                // 页面有多个dialog 找有宽高的 确定为当前打开的弹窗
                dialogList = Array.from(dialogList)
                dialogList.forEach(item => {
                    if(item.offsetHeight>0 && item.offsetWidth > 0 && item.offsetHeight) {
                        console.log(item,'itemitem');
                        dialog = item
                    }
                })
            } else {
                dialog = document.getElementsByClassName("el-dialog")[0];
            }
            console.log(dialog,'dialogdialog');
            //初始化不最大化
            el.fullscreen = false;
    
            //获取弹窗的初始宽高，这里不设置默认高度，设置默认高度会影响页面的样式
            let defaultWidth = dialog.style.width;
            // let defaultHeight = (dialog.style.height = binding.value || "100vh");
    
            //获取弹窗头，加上放大，缩小图标
            // let dialogHeader = document.getElementsByClassName("el-dialog__header")[0];
            let dialogHeader = dialog.childNodes[0]; // 默认获取当前弹窗的第一个子节点 理论上就是表头
            //修改弹窗表头样式
            dialogHeader.classList.add("dialog_header");
            //防止标题被选中
            dialogHeader.onselectstart = () => false;
    
            //通过输出表头，可以看出关闭按钮是一个button
            let maxOrMinList = document.getElementsByClassName("max_or_min");
    
            //防止重复添加
            let maxOrMin = document.createElement("button");
            //放大、缩小按
            maxOrMin.className += "el-dialog__headerbtn max_or_min";
            maxOrMin.innerHTML = `<i class="el-icon-full-screen"/></i>`;
    
            //给按钮添加事件，实现放大和缩小
            maxOrMin.onclick = () => {
                if (el.fullscreen) {
                    //缩小
                    dialog.style.marginTop = "50vh";
                    dialog.style.width = defaultWidth;
                    dialog.style.height = "auto";
                    maxOrMin.innerHTML = `<i class="el-icon-full-screen"/></i>`;
                } else {
                    //放大
                    dialog.style.marginTop = "50vh";
                    dialog.style.width = "100%";
                    dialog.style.height = "100%";
                    dialog.style.top = "0px";
                    maxOrMin.innerHTML = `<i class="el-icon-copy-document"/></i>`;
                    console.log(dialog,'dialog2');
                }
                dialog.className += " is-fullscreen"
                el.fullscreen = !el.fullscreen;
            };
    
            if (maxOrMinList.length == 0) {
                //将按钮插入弹窗头部
                dialogHeader.appendChild(maxOrMin);
            }
        },500)
        
    }
})
// v-dialogDrag: 位置拖拽
Vue.directive('dialogDrag', {
    bind (el, binding, vnode, oldVnode) {
      const dialogHeaderEl = el.querySelector('.el-dialog__header')
      const dragDom = el.querySelector('.el-dialog__wrapper')
      dialogHeaderEl.style.cursor = 'move'
      // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
      const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
  
      dialogHeaderEl.onmousedown = (e) => {
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft
        const disY = e.clientY - dialogHeaderEl.offsetTop
  
        // 获取到的值带px 正则匹配替换
        let styL, styT
  
        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (sty.left.includes('%')) {
          styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100)
          styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/px/g, '')
          styT = +sty.top.replace(/px/g, '')
        }
  
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX
          const t = e.clientY - disY
  
          // 移动当前元素
          dragDom.style.left = `${l + styL}px`
          // 判断弹窗位置，防止弹窗头部移出可视区
          dragDom.style.top = `${(t + styT) < 0 ? 0 : t + styT}px`
        }
  
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
})
  
// v-dialogDragWidth: 弹窗宽度拖大 拖小 位置在右下角 添加dom<div class="pointRB" v-dialogDragWidth></div>
Vue.directive('dialogDragWidth', {
    bind (el) {
        // Vue.nextTick(() => {
            let dragDom = document.getElementsByClassName("el-dialog")[0];
            el.style.cursor = 'se-resize'
            el.onmousedown = (e) => {
                // 鼠标按下，在原来页面上增加透明遮罩，防止部分元素例如iframe监听不到鼠标事件
                const mask = document.createElement('div')
                mask.setAttribute('style', 'position:fixed;top:0px;bottom:0px;left:0px;right:0px;background:rgba(0,0,0,0)')
                document.body.appendChild(mask)
                // 计算当前元素距离可视区的距离
                const disX = e.clientX - el.offsetLeft
                const disY = e.clientY - el.offsetTop
                document.body.onmousemove = function (e) {
                    e.preventDefault() // 移动时禁用默认事件
            
                    // 通过事件委托，计算移动的距离
                    const l = e.clientX - disX
                    const h = e.clientY - disY
                    dragDom.style.width = `${l}px`
                    // 判断弹窗高度，防止用于拖动的点移出可视区
                    dragDom.style.height = `${h > document.body.offsetHeight ? document.body.offsetHeight : h}px`
                }
                    document.body.onmouseup = function (e) {
                    document.body.removeChild(mask) // 移除mask遮罩
                    document.body.onmousemove = null
                    document.body.onmouseup = null
                }
            }
        // })
    }
})

//css
// 放大缩小按钮样式
.max_or_min {
  color: #909399;
  margin-right: 30px;
  font-size: 15px;
}

// 弹窗表头样式
.dialog_header {
  background-color: #e9e9e9;
}
.el-dialog .el-dialog__body{
  position: relative;
  .pointRB{
    width: 10px !important;
    height: 10px !important;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9999;
  }
}