vue2.x 常用自定义指令，项目常用自定义指令

我就是我 2022-10-18 12:59 334阅读 0赞

### **directives.js** ###

import Vue from 'vue'
    
    /**
     * 点击元素外 触发事件
     * 
     */
    Vue.directive('clickoutside', {
      bind(el, binding, vnode) {
        function documentHandler(e) {
          // 这里判断点击的元素是否是本身，是本身，则返回
          if (el.contains(e.target)) {
            return false
          }
          // 判断指令中是否绑定了函数
          if (binding.expression) {
            // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
            binding.value(e)
          }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler
        document.addEventListener('click', documentHandler)
      },
      update() { },
      unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
      }
    })
    /* 
    *响应缩放指令 v-resize
    *使用该指令可以响应元素宽高改变时执行的方法。
    *示例：<div v-resize="resize"></div> 
    *methods:{
      resize(){
    
      }
    }
    */
    Vue.directive('resize', {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = "",
          height = "";
    
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value(); // 关键
          }
          width = style.width;
          height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      }
    })
    
    
    /* 
     *文本内容复制指令 v-copy
     *使用该指令可以复制元素的文本内容（指令支持单击复制 v-copy、双击复制 v-copy.dblclick、点击icon复制 v-copy.icon 三种模式），不传参数时，默认使用单击复制
     *示例：<div v-copy> 单击复制 </div> <div v-copy.dblclick> 双击复制 </div> <div v-copy.icon> icon复制 </div>
     */
    
    function copyHandleClick(text) {
      // 创建元素
      if (!document.getElementById('copyTarget')) {
        const copyTarget = document.createElement('input')
        copyTarget.setAttribute('style', 'position:fixed;top:0;left:0;opacity:0;z-index:-1000;')
        copyTarget.setAttribute('id', 'copyTarget')
        document.body.appendChild(copyTarget)
      }
      // 复制内容
      const input = document.getElementById('copyTarget')
      input.value = text
      input.select()
      document.execCommand('copy')
      // alert('复制成功')
    }
    Vue.directive('copy', {
      bind(el, binding) {
        // 双击触发复制
        if (binding.modifiers.dblclick) {
          el.addEventListener('dblclick', () => copyHandleClick(el.innerText))
          el.style.cursor = 'copy'
        }
        // 点击icon触发复制
        else if (binding.modifiers.icon) {
          if (el.hasIcon) return
          const iconElement = document.createElement('i')
          iconElement.setAttribute('class', 'el-icon-document-copy')
          iconElement.setAttribute('style', 'margin-left:5px')
          el.appendChild(iconElement)
          el.hasIcon = true
          iconElement.addEventListener('click', () => copyHandleClick(el.innerText))
          iconElement.style.cursor = 'copy'
        }
        // 单击触发复制
        else {
          el.addEventListener('click', () => copyHandleClick(el.innerText))
          el.style.cursor = 'copy'
        }
      }
    })
    
    
    /* 
     *元素全屏指令 v-screenfull
     *全屏指令，点击元素进行全屏/退出全屏的操作。支持元素后面是否插入 element-ui 的全屏图标 el-icon-full-screen。
     *示例：<div v-screenfull.icon> 全屏 </div>
     *Fullscreen an element <div id='fullId'>text</div> <div v-screenfull.icon="'fullId'"> 全屏 </div>
     *需要安装插件 npm install screenfull
     */
    import screenfull from 'screenfull'
    
    function screenfullClick(dom) {
      if (!screenfull.isEnabled) {
        alert('浏览器不支持全屏')
        return
      }
      let element = document.getElementById(dom);
      screenfull.toggle(element)
    }
    
    Vue.directive('screenfull', {
      bind(el, binding) {
        if (binding.modifiers.icon) {
          if (el.hasIcon) return
          // 创建全屏图标
          const iconElement = document.createElement('i')
          iconElement.setAttribute('class', 'el-icon-full-screen')
          iconElement.setAttribute('style', 'margin-left:5px')
          el.appendChild(iconElement)
          el.hasIcon = true
        }
        el.style.cursor = el.style.cursor || 'pointer'
        // 监听点击全屏事件
        el.addEventListener('click', () => screenfullClick(binding.value))
      }
    })
    
    /* 
     *文字超出省略指令 v-ellipsis
     *使用该指令当文字内容超出宽度（默认 100% ）时自动变为省略形式
     *示例：<div v-ellipsis> 需要省略的文字xxxxxxxxxxxx副本</div>
     */
    Vue.directive('ellipsis', {
      bind(el, binding) {
        if (binding.arg) {
          el.style.width = binding.arg + 'px'
        } else {
          el.style.width = '100%'
        }
    
        el.style.whiteSpace = 'nowrap'
        el.style.overflow = 'hidden';
        el.style.textOverflow = 'ellipsis';
      }
    })
    
    
    /* 
     *字符串整形指令 v-format
     *使用该指令可以修改字符串，如使用 v-format.toFixed 保留两位小数、 v-format.price 将内容变成金额（每三位逗号分隔），可以同时使用，如 v-format.toFixed.price。
     *示例：例如将数字 243112.331 变成 243112.33，或 243,112.33。
     * <div v-format.toFixed.price="123333"></div>   显示结果123,333.00
     */
    function formatNumber(num) {
      num += '';
      let strs = num.split('.');
      let x1 = strs[0];
      let x2 = strs.length > 1 ? '.' + strs[1] : '';
      var rgx = /(\d+)(\d{3})/;
      while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
      }
      return x1 + x2
    }
    Vue.directive('format', {
      bind(el, binding, vnode) {
        const {
          value,
          modifiers
        } = binding
        if (!value) return
        let formatValue = value
        if (modifiers.toFixed) {
          formatValue = value.toFixed(2)
        }
        console.log(formatValue)
        if (modifiers.price) {
          formatValue = formatNumber(formatValue)
        }
        el.innerText = formatValue
      },
    })
    
    
    /* 
    *主要适配 智慧渔港拖动
    *自定义弹框拖拽
    *v-defDialogDrag:{defDialogDrag}="obj"
    * obj = {
        dialogDrag: true, //是否可拖动
        dragViewArea:"#main-body",//拖动可视区域
        dragFocusDom:".def-header" //鼠标可拖拽区域
    }
    *以left为基准
    */
    Vue.directive('defDialogDrag', {
      bind(el, binding, vnode, oldVnode) {
        // console.log('binding::', binding.value)
        // 自定义属性，判断是否可拖拽　
        if (!binding.value.dialogDrag) return
        const dialogHeaderEl = el.querySelector(binding.value.dragFocusDom) //.drag-dialog-box
        const dragDom = el
        dialogHeaderEl.style.cssText += ';cursor:move;'
        dragDom.style.cssText += ';top:40px;'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = (function () {
          if (document.body.currentStyle) {
            // 在ie下兼容写法
            return (dom, attr) => dom.currentStyle[attr]
          } else {
            return (dom, attr) => getComputedStyle(dom, false)[attr]
          }
        })()
    
        dialogHeaderEl.onmousedown = (e) => {
    
          const viewArea = document.querySelector(binding.value.dragViewArea) //可视区拖动范围
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft
          const disY = e.clientY - dialogHeaderEl.offsetTop
          // 获取可视范围padding
          let viewPl = Number(sty(viewArea, 'padding-left').substring(0, sty(viewArea, 'padding-left').length - 2)) || 0
          let viewPr = Number(sty(viewArea, 'padding-right').substring(0, sty(viewArea, 'padding-right').length - 2)) || 0
          let viewPt = Number(sty(viewArea, 'padding-top').substring(0, sty(viewArea, 'padding-top').length - 2)) || 0
          let viewPb = Number(sty(viewArea, 'padding-bottom').substring(0, sty(viewArea, 'padding-bottom').length - 2)) || 0
    
          console.log("wonendie", viewPl, viewPr, viewPt)
    
          const screenWidth = viewArea.clientWidth - viewPl - viewPr // 拖拽文本可视当前宽度
          const screenHeight = viewArea.clientHeight - viewPt - viewPb // 拖拽文本可视当前高度
    
          const dragDomWidth = dragDom.offsetWidth // 对话框宽度
          const dragDomheight = dragDom.offsetHeight // 对话框高度
    
          const minDragDomLeft = dragDom.offsetLeft - viewPl //拖拽最小left
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth + viewPl //拖拽最大left
    
          const minDragDomTop = dragDom.offsetTop - viewPt //拖拽最小top
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight //拖拽最大top
    
          // 获取到的值带px 正则匹配替换
          let styL = sty(dragDom, 'left')
          // 为兼容ie　
          if (styL === 'auto') styL = '0px'
          let styT = sty(dragDom, 'top')
    
          // console.log(styL)
          // 注意在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
            let top = e.clientY - disY
    
            // 边界处理
            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft)
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
    
            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop)
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
            console.log(`移动的元素:left:${left + styL}px;top:${top + styT}px;`)
            // 移动当前元素
            dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
    
            // emit onDrag event
            // vnode.child.$emit('dragDialog')
          }
    
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
      }
    })
    
    /* 
    *主要适配 智慧渔港拖动
    *自定义弹框拖拽
    *v-rightDialogDrag:{rightDialogDrag}="obj"
    * obj = {
        dialogDrag: true, //是否可拖动
        dragViewArea:"#main-body",//拖动可视区域
        dragFocusDom:".def-header" //鼠标可拖拽区域
    }
    *以right为基准
    */
    Vue.directive('rightDialogDrag', {
      bind(el, binding, vnode, oldVnode) {
        // console.log('binding::', binding.value)
        // 自定义属性，判断是否可拖拽　
        if (!binding.value.dialogDrag) return
        const dialogHeaderEl = el.querySelector(binding.value.dragFocusDom) //.drag-dialog-box
        const dragDom = el
        dialogHeaderEl.style.cssText += ';cursor:move;'
        dragDom.style.cssText += ';top:40px;'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = (function () {
          if (document.body.currentStyle) {
            // 在ie下兼容写法
            return (dom, attr) => dom.currentStyle[attr]
          } else {
            return (dom, attr) => getComputedStyle(dom, false)[attr]
          }
        })()
    
        dialogHeaderEl.onmousedown = (e) => {
    
          const viewArea = document.querySelector(binding.value.dragViewArea) //可视区拖动范围
          // 鼠标按下，计算当前元素距离可视区的距离
          const disX = e.clientX - dialogHeaderEl.offsetLeft
          const disY = e.clientY - dialogHeaderEl.offsetTop
          // 获取可视范围padding
          let viewPl = Number(sty(viewArea, 'padding-left').substring(0, sty(viewArea, 'padding-left').length - 2)) || 0
          let viewPr = Number(sty(viewArea, 'padding-right').substring(0, sty(viewArea, 'padding-right').length - 2)) || 0
          let viewPt = Number(sty(viewArea, 'padding-top').substring(0, sty(viewArea, 'padding-top').length - 2)) || 0
          let viewPb = Number(sty(viewArea, 'padding-bottom').substring(0, sty(viewArea, 'padding-bottom').length - 2)) || 0
    
          console.log("wonendie", viewPl, viewPr, viewPt)
    
          const screenWidth = viewArea.clientWidth - viewPl - viewPr // 拖拽文本可视当前宽度
          const screenHeight = viewArea.clientHeight - viewPt - viewPb // 拖拽文本可视当前高度
    
          const dragDomWidth = dragDom.offsetWidth // 对话框宽度
          const dragDomheight = dragDom.offsetHeight // 对话框高度
    
          const minDragDomLeft = dragDom.offsetLeft + viewPl
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth - viewPl
    
          const minDragDomTop = dragDom.offsetTop - viewPt //拖拽最小top
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight //拖拽最大top
    
          // 获取到的值带px 正则匹配替换
          let styL = sty(dragDom, 'left')
          // 为兼容ie　
          if (styL === 'auto') styL = '0px'
          let styT = sty(dragDom, 'top')
    
          // console.log(styL)
          // 注意在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
            let top = e.clientY - disY
    
            // 边界处理
            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft)
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
    
            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop)
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
            let right = screenWidth - dragDomWidth - left - styL
            // console.log(`移动的元素:right:${right}px;top:${top + styT}px;`)
            // 移动当前元素
            dragDom.style.cssText += `;right:${right}px;top:${top + styT}px;`
    
            // emit onDrag event
            // vnode.child.$emit('dragDialog')
          }
    
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
      }
    })
    
    /* binding v-dialogStretchdialogStretch:="{}"
    value:{
      value:boolean是否可拉伸 （必传）
      minw:Number最小宽 （必传）
      maxw:Number最大宽 （必传）
      minh:Number最小高 （必传）
      maxh:Number 最大高 （必传）
      ratio:Number宽高比 （非必传）
    }
    *****
    * pointer-events: none;通过对iframe限制 鼠标指针事件 禁止iframe影响拖拽 鼠标释放
    */
    Vue.directive('dialogStretch', {
      bind(el, binding, vnode, oldVnode) {
        // 自定义属性，判断是否可拉伸
        const bindVal = binding.value
        if (!bindVal.value) return
        const dragDom = el
        // 在弹出框的右下角添加可拉伸标志 class='mouse'
        let dragMouse = dragDom.querySelector('.mouse')
        // 鼠标拖拽
        dragMouse.onmousedown = (e) => {
          // content区域
          const content = dragDom.parentNode.parentNode
          const contentW = content.offsetWidth
          const contentH = content.offsetHeight
    
          const disX = e.clientX
          const disY = e.clientY
          let initialW = dragDom.offsetWidth
          let initialH = dragDom.offsetHeight
          let iframeDom = document.getElementById("iframe_gis")
    
          document.onmousemove = function (e) {
            e.preventDefault() // 移动时禁用默认事件
    
            iframeDom.style.pointerEvents = "none"
            console.log("iframe元素", iframeDom)
    
            // 通过事件委托，计算移动的距离
            let Cwidth = disX - e.clientX + initialW
            let Cheight = e.clientY - disY + initialH
    
    
            // 距离底部20px停止拖动
            if (e.clientY > contentH - 40) {
              console.log("不能再拖了")
              return
            } else {
              if (!!bindVal.ratio) {
                // 设置比例 宽高等比缩放
                let width = Cheight / bindVal.ratio
                if (Cheight < (contentH - 40) && Cheight >= bindVal.minH && width < (contentW - 40)) {
                  dragDom.style.width = `${width}px`
                  dragDom.style.height = `${Cheight}px`
                }
              } else {
                // console.log("点击角坐标2",Cheight < contentH, Cheight,Cwidth < (contentW - 40),Cwidth >= bindVal.minW)
                if (Cheight < contentH && Cheight >= bindVal.minH && Cwidth < (contentW - 40) && Cwidth >= bindVal.minW) {
                  // console.log("点击角坐标2", e.clientX, Cwidth)
                  dragDom.style.width = `${Cwidth}px`
                  dragDom.style.height = `${Cheight}px`
                }
              }
            }
          }
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
            iframeDom.style.pointerEvents = "auto"
          }
          return false
        }
      }
    })
    
    /* binding
    value:{
        value:boolean是否可拉伸 （必传）
        minw:Number最小宽 （必传）
        maxw:Number最大宽 （必传）
        minh:Number最小高 （必传）
        maxh:Number 最大高 （必传）
        ratio:Number宽高比 （非必传）
        ratio?
        minw:Number最小宽 （必传）
        maxw:Number最大宽 （必传）
        minh:Number最小高 （非必传）
        maxh:Number 最大高 （非必传）
     } */
    Vue.directive('newDialogChange', {
      bind(el, binding, vnode, oldVnode) {
        // 自定义属性，判断是否可拉伸
        const bindVal = binding.value
        // console.log(bindVal, "binding")
    
        if (!bindVal.value) return
        const dragDom = el
        console.log(dragDom.childNodes[1].childNodes, "拖拽属性")
        // 在弹出框的右下角添加可拉伸标志 class='mouse'
        let dragMouse = dragDom.querySelector('.mouse')
    
        // 鼠标拖拽
        dragMouse.onmousedown = (e) => {
          // content区域
          const content = dragDom.parentNode.parentNode
          // console.log(content, "llllllllllllllllllllllllllllllll")
          const disX = e.clientX - dragDom.offsetWidth
          const disY = e.clientY - dragDom.offsetHeight
    
    
    
          document.onmousemove = function (e) {
            e.preventDefault() // 移动时禁用默认事件
            // 通过事件委托，计算移动的距离
    
            let width = e.clientX - disX
            let height = e.clientY - disY
            // console.log(e.clientX, e.clientY, content.offsetWidth, content.offsetHeight, width, height, 'sssss')
    
            // 距离底部20px停止拖动
            if (e.clientY > content.offsetHeight - 20) {
              // console.log("不能再拖了")
              return
            } else {
              if (!!bindVal.ratio) {
                // 设置比例 宽高等比缩放
    
                if (width < content.offsetWidth && height < content.offsetHeight) {
                  if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
                    dragDom.style.width = `${width}px`
                    dragDom.style.height = `${width * bindVal.ratio}px`
                    // vnode.child.$emit('dragDialogHeight',width * bindVal.ratio)
                  }
                  // dragDom.style.height = `${width*0.6}px`
                  // dragDom.style.height = `${height}px`
                }
              } else {
                // 不设置比例 宽高随意拖动
                if (width > content.offsetWidth && height < content.offsetHeight) {
                  if (!!bindVal.minh && bindVal.minh < height && !!bindVal.maxh && height < bindVal.maxh) {
                    dragDom.style.height = `${height}px`
                  }
                } else if (width < content.offsetWidth && height > content.offsetHeight) {
                  if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
                    dragDom.style.width = `${width}px`
                  }
                } else if (width < content.offsetWidth && height < content.offsetHeight) {
                  if (!!bindVal.minh && bindVal.minh < height && !!bindVal.maxh && height < bindVal.maxh) {
                    dragDom.style.height = `${height}px`
                  }
                  if (!!bindVal.minw && bindVal.minw < width && !!bindVal.maxw && width < bindVal.maxw) {
                    dragDom.style.width = `${width}px`
                  }
                  // dragDom.style.height = `${width*0.6}px`
                  // dragDom.style.height = `${height}px`
                }
              }
            }
    
    
    
    
          }
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
    
    
      }
    })
    
    
    // v-dialogDrag: 弹窗拖拽属性
    Vue.directive('newDialogDrag', {
      bind(el, binding, vnode, oldVnode) {
        // console.log('binding::',binding.value)
        // 自定义属性，判断是否可拖拽　
        if (!binding.value) return
        const dialogHeaderEl = el.querySelector('.drag-fouce-box') //.drag-dialog-box
        const dragDom = el
        // console.log("44444444444",dialogHeaderEl)
        dialogHeaderEl.style.cssText += ';cursor:move;'
        dragDom.style.cssText += ';top:40px;'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = (function () {
          if (document.body.currentStyle) {
            // 在ie下兼容写法
            return (dom, attr) => dom.currentStyle[attr]
          } else {
            return (dom, attr) => getComputedStyle(dom, false)[attr]
          }
        })()
    
        dialogHeaderEl.onmousedown = (e) => {
          console.log(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 // 对话框高度
    
          const minDragDomLeft = dragDom.offsetLeft
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
    
          const minDragDomTop = dragDom.offsetTop
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
    
          // 获取到的值带px 正则匹配替换
          let styL = sty(dragDom, 'left')
          // 为兼容ie　
          if (styL === 'auto') styL = '0px'
          let styT = sty(dragDom, 'top')
    
          // console.log(styL)
          // 注意在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
            let top = e.clientY - disY
            // 边界处理
            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft)
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
    
            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop)
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
    
            // 移动当前元素
            dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
    
            // emit onDrag event
            // vnode.child.$emit('dragDialog')
          }
    
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
      }
    })
    
    
    
    
    
    
    // 适配可视范围拖动
    Vue.directive('priviewDrag', {
      bind(el, binding, vnode, oldVnode) {
        // 自定义属性，判断是否可拖拽　
        if (!binding.value) return
        const dialogHeaderEl = el.querySelector('.model-move') //.drag-dialog-box
        const dragDom = el
        // console.log("44444444444",dialogHeaderEl)
        dialogHeaderEl.style.cssText += ';cursor:move;'
        dragDom.style.cssText += ';top:40px;'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = (function () {
          if (document.body.currentStyle) {
            // 在ie下兼容写法
            return (dom, attr) => dom.currentStyle[attr]
          } else {
            return (dom, attr) => getComputedStyle(dom, false)[attr]
          }
        })()
    
        dialogHeaderEl.onmousedown = (e) => {
          console.log(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 // 对话框高度
    
          const minDragDomLeft = dragDom.offsetLeft
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
    
          const minDragDomTop = dragDom.offsetTop
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
    
          // 获取到的值带px 正则匹配替换
          let styL = sty(dragDom, 'left')
          // 为兼容ie　
          if (styL === 'auto') styL = '0px'
          let styT = sty(dragDom, 'top')
    
          // console.log(styL)
          // 注意在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
            let top = e.clientY - disY
            // 边界处理
            if (-(left) > minDragDomLeft) {
              left = -(minDragDomLeft)
            } else if (left > maxDragDomLeft) {
              left = maxDragDomLeft
            }
    
            if (-(top) > minDragDomTop) {
              top = -(minDragDomTop)
            } else if (top > maxDragDomTop) {
              top = maxDragDomTop
            }
    
            // 移动当前元素
            dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
    
            // emit onDrag event
            // vnode.child.$emit('dragDialog')
          }
    
          document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
          }
          return false
        }
      }
    })

### main.js 中全局引用 ###

import "./directives/directives";