Question

我正在使用Angular4 +。

我想以编程方式垂直调整div的大小。我不知道如何做到这一点。我不知道从哪里开始。以及如何实现它。我对使用jquery不感兴趣。使用角度方式实现此目的的任何想法或解决方案。

.textarea {
   min-height: 150px;
   border:1px solid #ddd;
   padding:15px;
   position:relative;
}

.textarea::before{
   content: '';
   position: absolute;
   bottom: 0;
   margin-left: -15px;
   cursor: s-resize;
   height: 9px;
   width: 100%;
   border-top: 1px solid #f1f1f1;
   overflow: hidden;
   background-color: #eff0f1;
   background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg');
   background-image: url('https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg'),none;
   background-position: 210px -364px;
   background-size: initial;
   background-repeat: no-repeat;
}

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

stackblitz https://stackblitz.com/edit/angular-text-resizable

Answer 1

ngStyle应该这样做：

<div class="textarea"contenteditable="true" [ngStyle]="{'height.px': height}">
this is a text area
</div>

其中height是组件中的变量：

@Component(...)
export class Component {
  height = 500;
}

Answer 2

指令

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 resizer></div>
</div>

工作示例https://stackblitz.com/edit/angular-text-v-resizable

以编程方式垂直调整div

2 个答案: