Question

我有一个类似行的布局，在行上，嵌入的div中有几个文本区域，如下所示：

 <div class="row-192">
  <div class="inner">
     <p>
       text
     </p>
     <textarea rows="4" cols="40"></textarea>
   </div>
 </div>

如果用户使用小三角形按钮调整textArea的大小，我需要相应地调整当前行高（和其他属性）。我在jQuery中找到了一些解决方案，但我只需坚持使用Angular指令。

演示： http://jsfiddle.net/o0yvysL5/1/

最好，我需要一些我可以订阅的活动，例如<textarea (resize)="resizeEvent($event)" ...，但没有。

有什么想法吗？

Answer 1

<强> resizable.textarea.directive.ts

AuthenticAMD

按如下方式使用：

@Directive({
  selector: 'textarea[resize]'
})
export class ResizableTextAreaDirective {
  @Output() resize = new EventEmitter();

  width: number;
  height: number;

  mouseMoveListener: Function;

  @HostListener('mousedown', ['$event.target'])
  onMouseDown(el) {
    this.width = el.offsetWidth;
    this.height = el.offsetHeight;
    this.mouseMoveListener = this.renderer.listen('document', 'mousemove', () => {
      if (this.width !== el.offsetWidth || this.height !== el.offsetHeight) {
        this.resize.emit({ width: el.offsetWidth, height: el.offsetHeight });
      }
    });
  }

  @HostListener('document:mouseup')
  onMouseUp(el) {
    this.ngOnDestroy();
  }

  constructor(private renderer: Renderer2) {}

  ngOnDestroy() {
    if (this.mouseMoveListener) {
      this.mouseMoveListener();
    }
  }
}

<强> Stackblitz Example

Answer 2

这会引发一些额外的事件，但应该有效：

<textarea rows="4" cols="40" #ta 
    (mousemove)="$event.buttons === 1 ? updateSize(ta.clientHeight, ta.clientWidth) : null">
</textarea>

另见https://stackoverflow.com/a/526352/217408

或者甚至更好：

<textarea rows="4" cols="40" #ta 
    (mouseup)="updateSize(ta.clientHeight, ta.clientWidth) : null">
</textarea>

另见https://stackoverflow.com/a/10218286/217408

html textArea使用Angular调整大小事件

2 个答案: