const updateWidth = () => {
let resize = document.getElementById("datatree");
let mainForm = document.getElementsByClassName("mainForm");
resize.onmousedown = function (e) {
let startX = e.clientX;
if(e.target.style.cursor == "e-resize")
{
document.onmousemove = function (e) {
let endX = e.clientX;
let moveLen = endX - startX;
startX = endX;
widthData.with += moveLen;
data.widthTree = widthData.with - 25;
//e.target.style.cursor = "e-resize"
};
document.onmouseup = function (e) {
// 顏色恢復
e.target.style.cursor = "auto";
e.target.style.background = "";
resize.style.cursor = "auto";
resize.style.background = "";
document.getElementById("asideId").style.cursor = "auto";
document.getElementById("asideId").style.background = "";
for (let index = 0; index < mainForm.length; index++) {
mainForm[index].style.cursor = "auto";
mainForm[index].style.background = "";
}
document.onmousemove = null;
document.onmouseup = null;
};
return false;
}
};
};
//在onMounted中實現方法
updateWidth();
let resize = document.getElementById("asideId");
let tree = document.getElementById("datatree");
tree.onmousemove = function (e) {
var divRect = e.target.getBoundingClientRect();
var x = e.clientX - divRect.left-20;
var y = e.clientY - divRect.top;
if (e.target.offsetWidth-1<=x||
e.target.offsetWidth-2<=x||
e.target.offsetWidth-3<=x||
e.target.offsetWidth-4<=x||
e.target.offsetWidth-23<=x||
e.target.offsetWidth-24<=x||
e.target.offsetWidth-25<=x
) {
e.target.style.cursor = "e-resize";
}
else {
e.target.style.cursor = "";
}
};