element-ui dialog组件添加可拖拽位置 可拖拽宽高

edge浏览器下作的gif
http://www.lanourteam.com/%E6...

有几个点需要注意一下

• 每个弹窗都要有唯一dom可操作 指令可以做到
• 拖拽时要添加可拖拽区块 header
• 由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题
• 实现拖拽宽高时 获取边缘问题 div定位 设置模拟边缘

<template>
    <el-dialog
        v-dialogDrag
        ref="dialog__wrapper">
        <div class="dialog-body">

            <div
                class="line"
                v-dialogDragWidth="$refs.dialog__wrapper"></div>
        </div>
    </el-dialog>
</template>

　　

dialog组件的其它属性这里就不写了. 项目中的指令都定义directives.js中集中管理, 全局注册.
directives.js:

 import Vue from 'vue';

 // 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;
             };
         }
     }
 })

 // v-dialogDragWidth: 弹窗宽度拖大 拖小
 Vue.directive('dialogDragWidth', {
     bind(el, binding, vnode, oldVnode) {
         const dragDom = binding.value.$el.querySelector('.el-dialog');

         el.onmousedown = (e) => {

             // 鼠标按下，计算当前元素距离可视区的距离
             const disX = e.clientX - el.offsetLeft;

             document.onmousemove = function (e) {
                 e.preventDefault(); // 移动时禁用默认事件

                 // 通过事件委托，计算移动的距离
                 const l = e.clientX - disX;
                 dragDom.style.width = `${l}px`;
             };

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

main.js:

 // 引入自定义指令
 import './directives.js';