代碼：
//移動(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 必須寫在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)條到最上面
