el-dialog实现自由拖拽

vue通过自定义指令方式实现el-dialog自由拖拽

• 1. src目录下 新建 directive 文件夹-->el-drag-dialog文件夹 包含index.js drag.js

  • index.js

    import drag from './drag'
    
    const install = function(Vue) {
      Vue.directive('el-drag-dialog', drag)
    }
    
    if (window.Vue) {
      window['el-drag-dialog'] = drag
      Vue.use(install); // eslint-disable-line
    }
    
    drag.install = install
    export default drag
    
    

  • drag.js

    export default {
      bind(el, binding, vnode) {
        const dialogHeaderEl = el.querySelector('.el-dialog__header')
        const dragDom = el.querySelector('.el-dialog')
        dialogHeaderEl.style.cssText += ';cursor:move;'
        dragDom.style.cssText += ';top:0px;'
    
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const getStyle = (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 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
    
          // 获取到的值带px 正则匹配替换
          let styL = getStyle(dragDom, 'left')
          let styT = getStyle(dragDom, 'top')
    
          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
          }
        }
      }
    }
    
    

​

• 2. views下新建 dragDemo/index.vue

  • index.vue

    <template>
      <div class="components-container">
        <el-button type="success" size="small" @click="openDialog"
          >拖拽弹框打开</el-button
        >
        <el-dialog
          v-el-drag-dialog
          :visible.sync="dialogVisible"
          title="弹框拖拽实现"
          :close-on-click-modal="false"
          @dragDialog="handleDrag"
        >
        </el-dialog>
      </div>
    </template>
    
    <script>
    // 引入主文件
    import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
    
    export default {
      name: "DragDialogDemo",
      // 注册
      directives: { elDragDialog },
      data() {
        return {
          dialogVisible: false
        };
      },
      methods: {
        handleDrag() {},
        // 弹框开启
        openDialog() {
          this.dialogVisible = true;
        }
      }
    };
    </script>
    <style lang="scss">
    // 样式不可缺失  html  body
    html {
      height: 100%;
      box-sizing: border-box;
    }
    body {
      height: 100%;
    }
    
    .components-container {
      margin: 30px 50px;
    }
    </style>