Element,el-dialog彈出層拖拽及拉伸、雙擊全屏

復制以下代碼就可使用



//將以下代碼復制到一個文件下的新建js文件

import Vuefrom "vue";

/*

*? 使用方法*? 將以下代碼復制到一個js文件中，然后在入口文件main.js中import引入即可；*? 給elementUI的dialog上加上 v-dialogDrag 指令就可以實現(xiàn)彈窗的全屏和拉伸了。*? 給dialog設置 :close-on-click-modal="false" , 禁止點擊遮罩層關(guān)閉彈出層*? 如果是form表單，不要將提交等按鈕放置el-form-item，以免在上下拉伸時被隱藏*/

// v-dialogDrag: 彈窗拖拽+水平方向伸縮

Vue.directive("dialogDrag", {

bind(el, binding, vnode, oldVnode) {

//彈框可拉伸最小寬高

? let minWidth =400;

? let minHeight =300;

? //初始非全屏

? let isFullScreen =false;

? //當前寬高

? let nowWidth =0;

? let nowHight =0;

? //當前頂部高度

? let nowMarginTop =0;

? //獲取彈框頭部（這部分可雙擊全屏）

? const dialogHeaderEl = el.querySelector(".el-dialog__header");

? //彈窗

? const dragDom = el.querySelector(".el-dialog");

? //給彈窗加上overflow auto；不然縮小時框內(nèi)的標簽可能超出dialog；

? dragDom.style.overflow ="auto";

? //清除選擇頭部文字效果

? //dialogHeaderEl.onselectstart = new Function("return false");

? //頭部加上可拖動cursor

? dialogHeaderEl.style.cursor ="move";

? // 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);

? const sty = dragDom.currentStyle ||window.getComputedStyle(dragDom, null);

? let moveDown = e => {

// 鼠標按下，計算當前元素距離可視區(qū)的距離

? 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;

? };

? };

? dialogHeaderEl.onmousedown =moveDown;

? //雙擊頭部全屏效果

? dialogHeaderEl.ondblclick = e => {

if (isFullScreen ==false) {

nowHight = dragDom.clientHeight;

? ? nowWidth = dragDom.clientWidth;

? ? nowMarginTop = dragDom.style.marginTop;

? ? dragDom.style.left =0;

? ? dragDom.style.top =0;

? ? dragDom.style.height ="100VH";

? ? dragDom.style.width ="100VW";

? ? dragDom.style.marginTop =0;

? ? isFullScreen =true;

? ? dialogHeaderEl.style.cursor ="initial";

? ? dialogHeaderEl.onmousedown =null;

? }else {

dragDom.style.height ="auto";

? ? dragDom.style.width = nowWidth +"px";

? ? dragDom.style.marginTop = nowMarginTop;

? ? isFullScreen =false;

? ? dialogHeaderEl.style.cursor ="move";

? ? dialogHeaderEl.onmousedown =moveDown;

? }

};

? dragDom.onmousemove =function(e) {

let moveE = e;

? if (

e.clientX > dragDom.offsetLeft + dragDom.clientWidth -10 ||

dragDom.offsetLeft +10 > e.clientX

? ) {

dragDom.style.cursor ="w-resize";

? }else if (

el.scrollTop + e.clientY >

dragDom.offsetTop + dragDom.clientHeight -10

? ) {

dragDom.style.cursor ="s-resize";

? }else {

dragDom.style.cursor ="default";

? ? dragDom.onmousedown =null;

? }

dragDom.onmousedown = e => {

const clientX = e.clientX;

? ? const clientY = e.clientY;

? ? let elW = dragDom.clientWidth;

? ? let elH = dragDom.clientHeight;

? ? let EloffsetLeft = dragDom.offsetLeft;

? ? let EloffsetTop = dragDom.offsetTop;

? ? dragDom.style.userSelect ="none";

? ? let ELscrollTop = el.scrollTop;

? ? //判斷點擊的位置是不是為頭部

? ? if (

clientX > EloffsetLeft &&

clientX < EloffsetLeft + elW &&

clientY > EloffsetTop &&

clientY < EloffsetTop +100

? ? ) {

//如果是頭部在此就不做任何動作，以上有綁定dialogHeaderEl.onmousedown = moveDown;

? ? }else {

document.onmousemove =function(e) {

e.preventDefault(); // 移動時禁用默認事件

? ? ? //左側(cè)鼠標拖拽位置

? ? ? if (clientX > EloffsetLeft && clientX < EloffsetLeft +10) {

//往左拖拽

? ? ? if (clientX > e.clientX) {

dragDom.style.width = elW + (clientX - e.clientX) *2 +"px";

? ? ? }

//往右拖拽

? ? ? if (clientX < e.clientX) {

if (dragDom.clientWidth < minWidth) {

}else {

dragDom.style.width = elW - (e.clientX - clientX) *2 +"px";

? ? ? ? }

}

}

//右側(cè)鼠標拖拽位置

? ? ? if (

clientX > EloffsetLeft + elW -10 &&

clientX < EloffsetLeft + elW

) {

//往左拖拽

? ? ? if (clientX > e.clientX) {

if (dragDom.clientWidth < minWidth) {

}else {

dragDom.style.width = elW - (clientX - e.clientX) *2 +"px";

? ? ? ? }

}

//往右拖拽

? ? ? if (clientX < e.clientX) {

dragDom.style.width = elW + (e.clientX - clientX) *2 +"px";

? ? ? }

}

//底部鼠標拖拽位置

? ? ? if (

ELscrollTop + clientY > EloffsetTop + elH -20 &&

ELscrollTop + clientY < EloffsetTop + elH

) {

//往上拖拽

? ? ? if (clientY > e.clientY) {

if (dragDom.clientHeight < minHeight) {

}else {

dragDom.style.height = elH - (clientY - e.clientY) *2 +"px";

? ? ? ? }

}

//往下拖拽

? ? ? if (clientY < e.clientY) {

dragDom.style.height = elH + (e.clientY - clientY) *2 +"px";

? ? ? }

}

};

? ? //拉伸結(jié)束

? ? document.onmouseup =function(e) {

document.onmousemove =null;

? ? ? document.onmouseup =null;

? ? };

? ? }

};

? };

}

});

在main.js中全局引入

在需要使用dialog的地方 加一個屬性? v-dialogDrag

作者：清哥1992

鏈接：http://www.itdecent.cn/p/0daf43364da5

來源：簡書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。




//只可以拖拽 流程一樣

import Vuefrom "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 => {

// 鼠標按下，計算當前元素距離可視區(qū)的距離

? 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 => {

// 鼠標按下，計算當前元素距離可視區(qū)的距離

? 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;

? };

? };

}

});

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容