angular 4+ 水平调整 div 的大小

Question

我是 angular 4 的新手，我一直在尝试创建一个可调整大小的 div（水平），但我无法实现。我想单击抓取来调整 div 的大小。我想水平调整文本区域的大小。也在下面的链接中，鼠标事件应用于文档，但我希望鼠标事件仅应用于抓取类单击而不是文档。请帮帮我

谢谢。

我试过这个 https://stackblitz.com/edit/angular-text-resizable-zvp3ns?file=app%2Fapp.component.ts

Answer 1

用 (mousemove)="func()"

<div class="grabber" (mousemove)="func($event)" ></div> 

在您component添加您编写的函数中(mousemove)
每次将项目拖到此元素上时注册事件

这是鼠标事件

（单击） 检查单击；包括鼠标向下点击，然后再次返回

（mouseover） 当光标悬停在应用该属性的元素上 时注册

（mousedown）当鼠标被点击时将注册该事件，不需要等待点击release

(mouseup) 这个事件在鼠标点击被释放时注册，所以点击不需要在元素本身上完成

(dblclick) 双击事件将在它在短时间内检测到两次鼠标点击时注册该事件

(drag) 将在项目被拖动时注册

(dragover)每次将项目拖到此元素上时注册该事件

Answer 2

在这里，我使用 angular 6 创建了水平（从右到左）可调整大小的 div

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

@Component({
selector: 'my-app',
template: `
<style>
.textarea {
   min-height: 150px;
   border:1px solid #ddd;
   padding:15px;
   position:relative;
   width: 100px;
   float:right;
}
.textarea .grabber{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   margin-right: -15px;
   cursor: ew-resize;
   height: 100%;
   width: 10px;
   border-top: 1px solid #444;
   overflow: hidden;
   background-color: #444;
}
</style>

<div class="textarea"  [style.width.px]='width' contenteditable="true" >

  this is a text area

  <div class="grabber"  ></div> 

</div>`
 })

export class AppComponent  {
  name = 'Angular 6';
  width = 150;
  x = 100;
  oldX = 0;
  grabber = false;

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

  @HostListener('document:mouseup', ['$event'])
  onMouseUp(event: MouseEvent) {
    this.grabber = false;
  }
  resizer(offsetX: number) {
    this.width -= offsetX;
  }
  @HostListener('document:mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    this.grabber = true;
    this.oldX = event.clientX;
  }
  }