公共方法:`
changeWidth(event, ele, leftEle, rightEle, contentEle, isListPage){
ele = ele.nativeElement;
leftEle = leftEle.nativeElement;
rightEle = rightEle.nativeElement;
contentEle = contentEle.nativeElement;
const disX = (event || window.event).clientX;
ele.left = ele.offsetLeft;
document.onmousemove = () =>{
let iT = ele.left + ((window.event || event).clientX - disX);
const e = event || window.event;
const tarnameb=e.target || e.srcElement;
const maxT = contentEle.clientWight - ele.offsetWidth;
let leftWidth;
ele.style.margin = 0;
iT < 0 && (iT = 0);
iT > maxT && (iT = maxT);
leftWidth = contentEle.clientWidth - iT;
if(isListPage) {
leftWidth = contentEle.clientWidth - iT - 10;
}
ele.style.left = leftEle.style.width = iT + "px";
rightEle.style.width = leftWidth + "px";
return false
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
ele.releaseCapture && ele.releaseCapture()
};
ele.setCapture && ele.setCapture();
return false
}
`
html代码`
<div style="position:relative" #contentEle>
<div #treeEle></div>
<div #drapDiv (mousedown)="onDrapMousedown($event)" [ngStyle]="{'height': height}"></div>
<div #tableEle></div>
</div>
`
angular代码:`
import { Component, ViewChild, ElementRef } from '@angular/core';
@ViewChild("drapDiv")
private drapDiv: ElementRef;
@ViewChild("treeEle")
private treeEle: ElementRef;
@ViewChild("tableEle")
private tableEle: ElementRef;
@ViewChild("contentEle")
private contentEle: ElementRef;
onDrapMousedown(event) {
this.changeWidth(event, this.drapDiv, this.treeEle, this.tableEle, this.contentEle, true);
}
`