代碼：

//移動(dòng)
<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) => {
                                    // 鼠標(biāo)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離
                                    const disX = e.clientX - dialogHeaderEl.offsetLeft;
                                    const disY = e.clientY - dialogHeaderEl.offsetTop;
                                    // 獲取到的值帶px 正則匹配替換
                                    let styL, styT;
                  // 注意在ie中 第一次獲取到的值為組件自帶50% 移動(dòng)之后賦值為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) {
                // 通過(guò)事件委托，計(jì)算移動(dòng)的距離 
                const l = e.clientX - disX;
                const t = e.clientY - disY;

                // 移動(dòng)當(dāng)前元素  
                dragDom.style.left = `${l + styL}px`;
                dragDom.style.top = `${t + styT}px`;

                //將此時(shí)的位置傳出去
                //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) => {
            
            // 鼠標(biāo)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離
            const disX = e.clientX - el.offsetLeft;
            
            document.onmousemove = function (e) {
                e.preventDefault(); // 移動(dòng)時(shí)禁用默認(rèn)事件

                // 通過(guò)事件委托，計(jì)算移動(dòng)的距離 
                const l = e.clientX - disX;
                dragDom.style.width = `${l}px`;
            };

            document.onmouseup = function (e) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }  
    }
})
</script>

script 必須寫(xiě)在new vue前面

彈框中內(nèi)容過(guò)多的時(shí)候，會(huì)給一個(gè)固定高，多出的會(huì)出現(xiàn)滾動(dòng)條。

多個(gè)播放按鈕用公用一個(gè)彈框

問(wèn)題：第一個(gè)播放滾動(dòng)到一個(gè)位置，打開(kāi)第二個(gè)播放的時(shí)候滾動(dòng)條會(huì)記得上一個(gè)滾動(dòng)的位置。
解決方法，在彈框的beforeClose事件中加上一個(gè)js代碼

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

這樣就可以讓彈框每次關(guān)閉的時(shí)候就可以讓滾動(dòng)條到最上面