借鉴地址:https://blog.csdn.net/xiaowu_hhb/article/details/52809328
1.设置拉伸盒子的id=“shrinkBox”
<el-col
:span="5"
class="zTree_custom"
id="shrinkBox"
>
2.在生命周期里mounted调用:(页面挂载完)
mounted() {
// 树菜单 拉伸
let oBox = document.getElementById("shrinkBox");
oBox.style.cursor = "w-resize";
let a = 0;
let b = 0;
let X, Y, oBoxW, oBoxH, oBoxL;
// 鼠标按下
oBox.onmousedown = function(ev) {
var oEvent = ev || event;
X = oEvent.clientX;
Y = oEvent.clientY;
oBoxW = oBox.offsetWidth;
oBoxH = oBox.offsetHeight;
oBoxL = oBox.offsetLeft;
if (X > oBox.offsetLeft + oBox.offsetWidth - 5) {
a = "right";
} else if (Y > oBox.offsetTop + oBoxH - 5) {
a = "bottom";
} else if (X < oBox.offsetLeft + 5) {
a = "left";
}
// 鼠标移动
document.onmousemove = function(ev) {
// oBox.style.cursor = "w-resize";
var oEvent = ev || event;
var XX = oEvent.clientX;
var YY = oEvent.clientY;
if (a == "right") {
oBox.style.width = oBoxW + (XX - X) + "px";
} else if (a == "bottom") {
oBox.style.height = oBoxH + (YY - Y) + "px";
} else if (a == "left") {
oBox.style.width = oBoxW + (X - XX) + "px";
oBox.style.left = XX - X + oBoxL - 5 + "px";
}
};
// 鼠标移开
document.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null;
};
};
},
3.注意事项:(坑)
(1)一定要在页面mounted调用,才能获取到dom元素,拉伸盒子元素;
(2)鼠标移动事件和鼠标移开事件必须放在鼠标点击事件里面,每次鼠标移开得清空鼠标点击事件和移动事件:
(3)拉伸拉伸 ,顾名思义,不能只放大不缩小,既得往左移又得往右移。