elementUI vue this.$confirm 和el-dialog 弹出框 移动

elementUI vue this.$confirm 和el-dialog 弹出框 拖动

1. el-dialog 弹出框 拖动

// v-dialogDrag: 弹窗拖拽
 Vue.directive('dialogDrag', {
   bind(el, binding, vnode, oldVnode) {
     const dialogHeaderEl = el.querySelector('.el-dialog__header')
     const dragDom = el.querySelector('.el-dialog')
     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}px`
 
         // 将此时的位置传出去
         // binding.value({x:e.pageX,y:e.pageY})
       }
 
       document.onmouseup = function(e) {
         document.onmousemove = null
         document.onmouseup = null
       }
     }
   }
 })

在<el-dialog  v-dialogDrag></el-dialog> 这么用

2. elementUI vue this.$confirm 弹出框 移动

//elementUI vue this.$confirm 弹出框移动
 $(function () {
    $("body").on("mousedown", '.el-message-box__header', (e) => {
        const dialogHeaderEl = document.querySelector('.el-message-box__header')
        const dragDom = document.querySelector('.el-message-box')
        dialogHeaderEl.style.cursor = 'move'
        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
        // 鼠标按下，计算当前元素距离可视区的距离
        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 {
            let lefts = sty.left
            let tops = sty.top
            if (sty.left == 'auto') {
                lefts = '0px'
            }
            if (sty.top == 'auto') {
                tops = '0px'
            }
            styL = +lefts.replace(/\px/g, '')
            styT = +tops.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}px`
            dragDom.style.position = `absolute`

            // 将此时的位置传出去
            // binding.value({x:e.pageX,y:e.pageY})
        }

        document.onmouseup = function (e) {
            document.onmousemove = null
            document.onmouseup = null
        }

    })
})

总结：
首先得引用在main.js引用应用jquery.js和dialogdrage.js。

我把两段代码都放到命名为dialogdrage里面，jquery和js最好放到utils文件夹下进行引用。

效果图：