Angular4 组件之间添加分割线

来源：互联网发布：java 吧编辑：程序博客网时间：2024/06/06 02:10

这里写图片描述
公共方法：`

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);    }

阅读全文

0 0