Question

我是角度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）点击鼠标时会注册事件，无需等待点击释放

（mouseup）此事件在释放鼠标单击时进行注册，因此无需在元素本身上执行单击操作

（dblclick）双击事件将在短时间内检测到两次鼠标点击时注册事件

（拖动）拖动项目时将进行注册

（dragover）每次在此元素上拖动项目时都会注册该事件

Answer 2

here I created horizontally(right to left) resizeable div using angular 6

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;
  }
  }

angular 4+水平调整div

2 个答案: