角度2垂直调整div

Question

我是 angular2 的新手，我一直在尝试创建一个可调整大小的 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();
  }
}

这是我尝试过的 stackblitz https://stackblitz.com/edit/angular-text-resizable-q6ddyy

我想点击抓取来调整 div 的大小。像这样的东西 https://jsfiddle.net/zv2ep6eo/ 。

谢谢。

原文由 Sibiraj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我想你错过了保留旧高度值的部分，加上检查 mouseup 的状态，还要听 mousedown 。我没有在下面的示例中使用指令，但它会很复杂。

Stackblitz 示例

打字稿：

   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>

原文由 Vega 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 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>

原文由 Sibiraj 发布，翻译遵循 CC BY-SA 3.0 许可协议