el-dialog实现可以拖动，底部可点击输入

dialog实现可以拖动的功能是最近新加的，本来只需要dialog取消蒙层后dialog底部的内容可以点击，表单可以输入等功能。为了实现这个功能就去找了实现拖动的轮子，找了好几个，然后发现好像我用的这个还行的。

参考文档地址

主打的就是一个简单粗暴直接上代码的，然后在使用的时候又仔细学习了一下这个代码，记录下来防止忘记

一：创建拖拽指令

文档地址中给的是一个指令代码，首先先创建一个指令js文件dialogDrag.js位置在src/directives文件下。

然后在文件中将拖拽指令的代码放上去。

二：使用指令

在需要使用指令的dialog文件中引入js文件，然后创建指令。

然后在dialog标签上将指令加上就可以实现了拖拽功能了。

三：发现放大功能有定位问题

我这里是单纯的拖动的， 有的轮子是有放大和缩小当前可拖动的窗口的功能的。我这里的放大的功能是我单独做的，所以在处理放大缩小的时候我这里的定位就有点问题。就想着怎么解决了。 上下拖动的时候还好，因为我这里是固定高度的，左右的话就会有定位的问题，我的放大和缩小仅仅是针对宽度发生了改变。

后面在放大缩小的方法中添加了一段代码，放大缩小的时候根据宽度将定位重新定位一下就可以了。

四：总结

当时写的时候是根据样式来写的放大缩小，没有拖拽的功能，拖拽的功能是后面再加的，导致这种写法就是一点点的在修补的样子，不是很好，后面如果有时间了会优化一下。

/**
 * @description 自定义指令v-drag
 */
import Vue from 'vue';
Vue.directive('drag', {
    bind(el, binding, vNode) {
      if (
        el.querySelector('.el-dialog__header') &&
        el.querySelector('.el-dialog')
      ) {
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
        const dragDom = el.querySelector('.el-dialog')
        dialogHeaderEl.style.cssText += ';cursor:move;'
        dragDom.style.cssText += ';top:0;'
        const getStyle = (function () {
          if (window.document.currentStyle) {
            return (dom, attr) => dom.currentStyle[attr]
          } else {
            return (dom, attr) => getComputedStyle(dom, null)[attr]
          }
        })()
  
        dialogHeaderEl.onmousedown = (e) => {


          const disX = e.clientX - dialogHeaderEl.offsetLeft
          const disY = e.clientY - dialogHeaderEl.offsetTop
          const dragDomWidth = dragDom.offsetWidth
          const dragDomHeight = dragDom.offsetHeight
  
          const screenWidth = document.body.clientWidth
          const screenHeight = document.body.clientHeight
  
          const minDragDomLeft = dragDom.offsetLeft
          const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
  
          const minDragDomTop = dragDom.offsetTop
          const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
  
          let styL = getStyle(dragDom, 'left')
          let styT = getStyle(dragDom, 'top')
  
          if (styL.includes('%')) {
            styL = +document.body.clientWidth * (+styL / 100)
            styT = +document.body.clientHeight * (+styT / 100)
          } else {
            styL = +styL.slice(0, -2)
            styT = +styT.slice(0, -2)
          }
  
          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;`
  
            vNode.child.$emit('drag-dialog')
          }
  
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    },
  })