Vue2+ElementUI 弹窗全局拖拽 支持放大缩小

拖拽组件

dialogDrag.vue

<template>
  <div></div>
</template>
<script>
  export default {
    name: 'dialogDrag',
    data() {
      return {
        originalWidth: null,
        originalHeight: null
      }
    },
    created() {
      this.$nextTick(()=>{
        this.dialogDrag()
      })
    },
    mounted() {
    },
    methods: {
      dialogDrag(){
        //获取弹窗DOM
        let dragDom = this.$el.getElementsByClassName('el-dialog')[0]
        // this.originalWidth = dragDom.style.width
        // this.originalHeight = dragDom.style.height
        //弹窗标题顶部DOM
        let dialogHeaderDom = this.$el.getElementsByClassName('el-dialog__header')[0]
        //设置拖动样式
        dialogHeaderDom.style.cursor = 'move'

        let mousedown = false

        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
        //鼠标按下弹窗顶部
        dialogHeaderDom.onmousedown = (e) => {
          if(e.stopPropagation) e.stopPropagation();
          if(e.preventDefault) e.preventDefault();
          if (e.detail === 2) {
            if (this.originalWidth || this.originalHeight) {
              // 还原弹窗的宽度和高度
              dragDom.style.width = this.originalWidth
              dragDom.style.height = this.originalHeight
              this.originalWidth = null
              this.originalHeight = null
            } else {
              // 保存当前弹窗的宽度和高度
              this.originalWidth = dragDom.style.width
              this.originalHeight = dragDom.style.height
              // 设置弹窗宽度和高度为窗口的宽度和高度
              dragDom.style.width = '100vw'
              dragDom.style.height = window.innerHeight + 'px'
              dragDom.style.overflow= 'auto'
            }
            mousedown = false
            document.onmousemove = null
            document.onmouseup = null
          }
          mousedown = true // 鼠标距离弹框的距离
          //获取鼠标拖拽起始X位置
          const startLeft = e.clientX - dialogHeaderDom.offsetLeft
          //获取鼠标拖拽起始Y位置
          const startTop = e.clientY - dialogHeaderDom.offsetTop // 现在弹框的left，top

          let styL, styT

          if (sty.left.includes('%')) {
            styL = +document.body.clientWidth * (+sty.left.replace('%', '') / 100)
            styT = +document.body.clientHeight * (+sty.top.replace('%', '') / 100)

          } else {
            styL = +sty.left.replace('px', '')
            styT = +sty.top.replace('px', '')
          }

          document.onmousemove = function(e) {
            if (!mousedown) {
              return false
            } // 鼠标移动的距离 + 弹框的left/top
            let l = e.clientX - startLeft + styL
            let t = e.clientY - startTop + styT

            const offsetParent = dragDom.offsetParent || document.body

            const maxL = offsetParent.clientWidth - dragDom.clientWidth
            //设置拖拽到底部最大高度4分之1
            const maxT = offsetParent.clientHeight - dragDom.clientHeight + (sty.height.toString().split('p') && Number(sty.height.toString().split('p')[0])/1.5)
            if (maxL < l) {
              l = maxL
            } else if (l < 0 && l * -1 > startLeft) {
              // 向左偏移的距离 l = -startLeft;
            }
            if (t < 0) {
              t = 0
            } else if (maxT < t) {
              t = maxT
            }
            dragDom.style.left = `${l}px`
            dragDom.style.top = `${t}px`
          }
          // document.onmouseup = function(e) {
          //   mousedown = false
          //   document.onmousemove = null
          //   document.onmouseup = null
          // }
          document.body.addEventListener('mouseup', () => {
            // mouseup 需要执行的代码块
            mousedown = false
            document.onmousemove = null
            document.onmouseup = null
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>

index.js

import dialogDragMixin from './dialogDrag'

export function installElement(Vue, Element) {

  Element.Dialog.mixins.push(dialogDragMixin);

}

main.js

import { installElement } from '@/config/element';
installElement(Vue, Element);

创建目录