角度2+垂直调整div

我是angular2的新手，我一直在尝试创建一个可调整大小的div（垂直）。但我无法做到这一点。我已经使用指令角度2+垂直调整div

尝试，这是我的指令

import { Directive, HostListener, ElementRef, Input } from '@angular/core'; 

@Directive({ 
    selector: '[appNgxResizer]' 
}) 
export class NgxResizerDirective { 

    constructor(private el: ElementRef) { 
    } 

    @HostListener('mousemove', ['$event']) resize(e) { 
    this.el.nativeElement.parentNode.style.height = (e.clientY - this.el.nativeElement.parentNode.offsetTop) + 'px'; 
    event.preventDefault(); 
    } 

    @HostListener('mouseup', ['$event']) stopResize(e) { 
    event.preventDefault(); 
    } 
}

这里是什么，我都试过https://stackblitz.com/edit/angular-text-resizable-q6ddyy

我想点击抢来调整股利的stackblitz。像这样的https://jsfiddle.net/zv2ep6eo/。

谢谢。

来源

2017-09-26 Sibi Raj

我想你错过了一部分，你保持高度的旧值，再加上检查mouseup的状态，并听取mousedown。在下面的例子中，我没有把它指向一个指令，但它会很复杂。

Stackblitz example

打字稿：

height = 150; 
    y = 100; 
    oldY = 0; 
    grabber = false; 

    @HostListener('document:mousemove', ['$event']) 
    onMouseMove(event: MouseEvent) { 
    if (!this.grabber) { 
     return; 
    } 
    this.resizer(event.clientY - this.oldY); 
    this.oldY = event.clientY; 
    } 

    @HostListener('document:mouseup', ['$event']) 
    onMouseUp(event: MouseEvent) { 
    this.grabber = false; 
    } 

    resizer(offsetY: number) { 
    this.height += offsetY; 
    } 


    @HostListener('document:mousedown', ['$event']) 
    onMouseDown(event: MouseEvent) { 
    this.grabber = true; 
    this.oldY = event.clientY; 
    event.preventDefault(); 
    }

HTML

<div class="textarea" [style.height.px]='height' contenteditable="true" > 
    this is a text area 
    <div class="grabber"></div> 
</div>

来源

2017-09-26 11:10:56 Vega

感谢，实际工作。:) –

使用指令我无法获得函数内的elementRef。它让我头痛。 –

谢谢。这是伟大的。这个问题是开放的更多的答案。如果不是，我会接受这个答案。 –

试试这个：由canResize设置为true

private canResize = false;

在鼠标按下启用调整：

添加一个变量

@HostListener('mousedown', ['$event']) enableResize(e) { 
    this.canResize = true; 
    event.preventDefault(); 
}

，所以你只调整当鼠标向下：

@HostListener('window:mousemove', ['$event']) resize(e) { 
    if (this.canResize) { 
    this.el.nativeElement.parentNode.style.height = (e.clientY - this.el.nativeElement.parentNode.offsetTop) + 'px'; 
    } 
    event.preventDefault(); 
}

在鼠标弹起设置canResize为false来禁止调整：

@HostListener('window:mouseup', ['$event']) stopResize(e) { 
    this.canResize = false; 
    event.preventDefault(); 
}

而且，看看this

（UPDATE：创建stackblitz）

来源

2017-09-26 08:41:28

感谢。我看起来像这样https://jsfiddle.net/zv2ep6eo/ –

修复你的stackbiltz使这项工作。看到这个：https://angular-text-resizable-q6ddyy.stackblitz.io –

谢谢，但无法调整大小 –

使用@维加的答案 - 一个指令。

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[resizer]' 
}) 
export class NgxResizerDirective implements OnInit { 

    height: number; 
    oldY = 0; 
    grabber = false; 

    constructor(private el: ElementRef) { } 

    @HostListener('document:mousemove', ['$event']) 
    onMouseMove(event: MouseEvent) { 

    if (!this.grabber) { 
     return; 
    } 

    this.resizer(event.clientY - this.oldY); 
    this.oldY = event.clientY; 
    } 

    @HostListener('document:mouseup', ['$event']) 
    onMouseUp(event: MouseEvent) { 
    this.grabber = false; 
    } 

    resizer(offsetY: number) { 
    this.height += offsetY; 
    this.el.nativeElement.parentNode.style.height = this.height + "px"; 
    } 

    @HostListener('mousedown', ['$event']) onResize(event: MouseEvent, resizer?: Function) { 
    this.grabber = true; 
    this.oldY = event.clientY; 
    event.preventDefault(); 
    } 

    ngOnInit() { 
    this.height = parseInt(this.el.nativeElement.parentNode.offsetHeight); 
    } 

}

HTML

<div class="textarea" contenteditable="true"> 
    this is a text area 
    <div class="grabber" resizer contenteditable="false" ></div> 
</div>

来源

2017-09-26 12:42:05

角度2+垂直调整div

回答

相关问题