©2020-2024 ioDraw All rights reserved
import Vue from "vue"; // v-dialogDrag: Pop up window drag + Horizontal expansion /* * usage method *
Copy the following code to a js In the file , Then in the import file main.js in import Just introduce it ; * to elementUI Of dialog Plus plus v-dialogDrag
Command to achieve the pop-up window full screen and stretch . * to dialog set up :close-on-click-modal="false" , Do not click on the mask layer to turn off the pop-up layer *
If it is form form , Do not place submit and other buttons el-form-item, To avoid being hidden when stretching up and down */ Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) { // Minimum stretchable width and height of spring frame let minWidth = 400; let
minHeight= 300; // Initial non full screen let isFullScreen = false; // Current width and height let nowWidth = 0; let
nowHight= 0; // Current top height let nowMarginTop = 0; // Get the bullet head （ This section can be double-click full screen ） const
dialogHeaderEl= el.querySelector('.el-dialog__header'); // Popup const dragDom = el.
querySelector('.el-dialog'); // Add a pop-up window overflow auto; Otherwise, the label in the box may exceed dialog; dragDom.
style.overflow = "auto"; // Clear selection head text effect //dialogHeaderEl.onselectstart = new
Function("return false"); // Head plus drag cursor dialogHeaderEl.style.cursor = 'move';
// Get original properties ie dom element .currentStyle Google window.getComputedStyle(dom element , null); const
sty= dragDom.currentStyle || window.getComputedStyle(dragDom, null); let
moveDown = (e) => { // Mouse down , Calculates the distance of the current element from the visible area const disX = e.clientX -
dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop;
// Obtained value band px Regular matching substitution let styL, styT; // Pay attention to the ie in The value obtained for the first time is provided by the component 50% After moving, it is assigned as 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) { // Delegate event passed , Calculate the distance to move
const l = e.clientX - disX; const t = e.clientY - disY; // Move current element dragDom.style
.left = `${l + styL}px`; dragDom.style.top = `${t + styT}px`; // Pass out the position at this time
//binding.value({x:e.pageX,y:e.pageY}) }; document.onmouseup = function (e) {
document.onmousemove = null; document.onmouseup = null; }; } dialogHeaderEl.
onmousedown= moveDown; // Double click head full screen effect 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; // Determine whether the click position is the head if (clientX > EloffsetLeft && clientX < EloffsetLeft
+ elW && clientY > EloffsetTop && clientY < EloffsetTop + 100) {
// If it's the head, don't do anything here , The above is bound dialogHeaderEl.onmousedown = moveDown; } else { document.
onmousemove = function (e) { e.preventDefault(); // Disable default events on move // Left mouse drag position if (
clientX> EloffsetLeft && clientX < EloffsetLeft + 10) { // Drag to the left if (clientX > e.
clientX) { dragDom.style.width = elW + (clientX - e.clientX) * 2 + 'px'; }
// Drag right if (clientX < e.clientX) { if (dragDom.clientWidth < minWidth) {} else {
dragDom.style.width = elW - (e.clientX - clientX) * 2 + 'px'; } } } // Right mouse drag position
if (clientX > EloffsetLeft + elW - 10 && clientX < EloffsetLeft + elW) { // Drag to the left
if (clientX > e.clientX) { if (dragDom.clientWidth < minWidth) {} else { dragDom
.style.width = elW - (clientX - e.clientX) * 2 + 'px'; } } // Drag right if (clientX <
e.clientX) { dragDom.style.width = elW + (e.clientX - clientX) * 2 + 'px'; } }
// Bottom mouse drag position if (ELscrollTop + clientY > EloffsetTop + elH - 20 && ELscrollTop +
clientY< EloffsetTop + elH) { // Drag it up if (clientY > e.clientY) { if (dragDom.
clientHeight< minHeight) {} else { dragDom.style.height = elH - (clientY - e.
clientY) * 2 + 'px'; } } // Drag it down if (clientY < e.clientY) { dragDom.style.height
= elH + (e.clientY - clientY) * 2 + 'px'; } } }; // Stretch end document.onmouseup =
function (e) { document.onmousemove = null; document.onmouseup = null; }; } } }
} }) // Note the introduction of Vue Below
Technology