Foreword
-
In actual development, we often use el-dialog pop-up boxes to make forms, which are usually centered. Part of the data is obscured
-
When we want to view the data under the pop-up box, we can only close the pop-up box first, and then open the pop-up box after viewing the data.
-
We can achieve this through dynamic styles and mouse events. But what I wrote is still lacking in adaptability and comprehensiveness.
-
We can copy and use this directly and write it as a global custom instruction. Used in many places and only used for addition
Code implementation – without custom instructions
1. Go to src/ to create the directive folder
2. Create a dialog folder in src/directive/ specifically for placing dialog-related code.
3. Create the drag.js file in src/directive/dialog – drag and drop the pop-up box – the code is as follows
/**
* v-dialogDrag pop-up drag and drop
*/
export default {
bind(el, binding, vnode, oldVnode) {
const value = binding.value
if (value === false) return
// Get the drag content header
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cursor = 'move';
// Get the original attributes ie dom element.currentStyle Firefox Google window.getComputedStyle(dom element, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dragDom.style.position = 'absolute';
dragDom.style.marginTop = 0;
let width = dragDom.style.width;
if (width.includes('%')) {
width = + document.body.clientWidth * ( + width.replace(/%/g, '') / 100);
} else {
width = + width.replace(/\px/g, '');
}
dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;
//Mouse press event
dialogHeaderEl.onmousedown = (e) => {
// When the mouse is pressed, calculate the distance between the current element and the visual area (the distance between the mouse click position and the visual window)
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
?
//The obtained value has px regular matching and replacement
let styL, styT;
?
// Note that in IE, the value obtained for the first time is 50% of the component. After moving, the value is assigned to 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, '');
}
?
//Mouse drag event
document.onmousemove = function (e) {
// Calculate the moving distance through event delegation (the distance from the start of dragging to the end of dragging)
const l = e.clientX - disX;
const t = e.clientY - disY;
?
let finallyL = l + styL
let finallyT = t + styT
?
//Move the current element
dragDom.style.left = `${finallyL}px`;
dragDom.style.top = `${finallyT}px`;
?
};
?
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
}
?
4. Create the dragWidth.js file in src/directive/dialog – change the width of the pop-up box – the code is as follows
/**
* Draggable pop-up window width (right side)
*/
?
export default {
bind(el) {
const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div');
lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize; ';
lineEl.addEventListener('mousedown',
function (e) {
// When the mouse is pressed, calculate the distance between the current element and the visible area
const disX = e.clientX - el.offsetLeft;
// current width
const curWidth = dragDom.offsetWidth;
document.onmousemove = function (e) {
e.preventDefault(); // Disable default events when moving
//Calculate the distance moved through event delegation
const l = e.clientX - disX;
dragDom.style.width = `${curWidth + l}px`;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
dragDom.appendChild(lineEl);
}
}
?
5. Create the dragHeight.js file in src/directive/dialog – change the width and height of the pop-up box – the code is as follows
/**
* Draggable pop-up window height (lower right corner) - height and width can also be changed
*/
?
export default {
bind(el) {
const dragDom = el.querySelector('.el-dialog');
const lineEl = document.createElement('div');
lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';
lineEl.addEventListener('mousedown',
function(e) {
// When the mouse is pressed, calculate the distance between the current element and the visible area
const disX = e.clientX - el.offsetLeft;
const disY = e.clientY - el.offsetTop;
//Current width height
const curWidth = dragDom.offsetWidth;
const curHeight = dragDom.offsetHeight;
document.onmousemove = function(e) {
e.preventDefault(); // Disable default events when moving
//Calculate the distance moved through event delegation
const xl = e.clientX - disX;
const yl = e.clientY - disY
dragDom.style.width = `${curWidth + xl}px`;
dragDom.style.height = `${curHeight + yl}px`;
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
}, false);
dragDom.appendChild(lineEl);
}
}
?
6. Create the index.js file in src/directive/-register the custom instructions uniformly-the code is as follows
//dialog pop-up box-dragable
import dialogDrag from './dialog/drag'
//dialog pop-up box-width can be dragged
import dialogDragWidth from './dialog/dragWidth'
//dialog pop-up box-height can be dragged (width can also be dragged)
import dialogDragHeight from './dialog/dragHeight'
?
const install = function (Vue) {
//dialog popup box-dragable-use v-dialogDrag
Vue.directive('dialogDrag', dialogDrag)
//dialog popup box-width can be dragged-use v-dialogDragWidth
Vue.directive('dialogDragWidth', dialogDragWidth)
// dialog pop-up box - height can be dragged (width can also be dragged) - use v-dialogDragHeight
Vue.directive('dialogDragHeight', dialogDragHeight)
}
?
?
export default install
?
7. Come to main.js and introduce registration
//Custom instructions import directive from './directive' ? // mount Vue.use(directive)
8. Go to the page to use
Summary:
After this process, I believe you have also had an initial deep impression on the vue el-dialog pop-up box custom instructions to drag and drop to change the position-width-height, but in actual development, the situation we encountered is definitely different. , so we must understand its principles and never depart from its origins. Come on, hit the workers!
Please point out any deficiencies, thank you – Feng Guo Wuhen
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry skill treeHomepageOverview 39397 people are learning the system