javascript – angular 2垂直调整div
作者:互联网
我是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();
}
}
这是我尝试过https://stackblitz.com/edit/angular-text-resizable-q6ddyy的stackblitz
我想点击抓取来调整div的大小.像这样的东西https://jsfiddle.net/zv2ep6eo/.
谢谢.
解决方法:
我想你错过了保持高度旧值的部分,加上检查鼠标上的状态以及听mousedown.我没有在下面的例子中指出它,但它会很复杂.
打字稿:
height = 150;
y = 100;
oldY = 0;
grabber = false;
@HostListener('document:mousemove', ['$event'])
onm ouseMove(event: MouseEvent) {
if (!this.grabber) {
return;
}
this.resizer(event.clientY - this.oldY);
this.oldY = event.clientY;
}
@HostListener('document:mouseup', ['$event'])
onm ouseUp(event: MouseEvent) {
this.grabber = false;
}
resizer(offsetY: number) {
this.height += offsetY;
}
@HostListener('document:mousedown', ['$event'])
onm ouseDown(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>
标签:javascript,angular,typescript,css,angular2-directives 来源: https://codeday.me/bug/20190828/1750288.html