element ui 中的弹框的拖动和拉伸以及其他问题

代码：

//移动
<template>
<el-dialog v-x>
      <div class="dialog-body"><div class="line" v-dialogDragWidth="$refs.dialog__wrapper"></div>
      </div>
    </el-dialog>
//宽高
    <el-dialog v-dialogDragWidth>
      <div class="dialog-body">
          <div 
              class="line"
              v-dialogDragWidth="$refs.dialog__wrapper"></div>
          </div>
    </el-dialog>
</template>
<script>
      Vue.directive('x', {
                    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;
            };
        }  
    }
})
</script>

script 必须写在new vue前面

弹框中内容过多的时候，会给一个固定高，多出的会出现滚动条。

多个播放按钮用公用一个弹框

问题：第一个播放滚动到一个位置，打开第二个播放的时候滚动条会记得上一个滚动的位置。
解决方法，在弹框的beforeClose事件中加上一个js代码

document.getElementsByClassName('dialogueList')[0].scrollTop=0

这样就可以让弹框每次关闭的时候就可以让滚动条到最上面