我是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/。
谢谢。
我想你错过了保持高度旧值的部分,再加上mouseup
上的状态,还要听mousedown
。我没有在下面的例子中指出它,但它会很复杂。
打字稿:
height = 150;
y = 100;
oldY = 0;
grabber = false;
@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;
}
@HostListener('document:mousedown', ['$event'])
onMouseDown(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>
使用@ Vega的答案 - 指令。
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 class="grabber" resizer contenteditable="false" ></div>
</div>
试试这个:
添加变量:
private canResize = false;
在mousedown上,通过将canResize设置为true来调整大小:
@HostListener('mousedown', ['$event']) enableResize(e) {
this.canResize = true;
event.preventDefault();
}
这样只有在鼠标停止时才调整大小:
@HostListener('window:mousemove', ['$event']) resize(e) {
if (this.canResize) {
this.el.nativeElement.parentNode.style.height = (e.clientY - this.el.nativeElement.parentNode.offsetTop) + 'px';
}
event.preventDefault();
}
在鼠标向上设置canResize为false以禁用调整大小:
@HostListener('window:mouseup', ['$event']) stopResize(e) {
this.canResize = false;
event.preventDefault();
}
另外,看看this
(更新:创建stackblitz)
我发现这个库非常有用且易于使用:angular-split
用法如下所示(下面的示例来自左侧带有导航菜单的应用程序组件,右侧是各个组件/页面 - 如果您喜欢垂直导航菜单,则是一个高度使用的用例。)
<as-split direction="horizontal" style="height: 1000px;">
<as-split-area size="15">
<app-nav-menu></app-nav-menu>
</as-split-area>
<as-split-area size="85">
<div class="col-12 col-lg-9 body-content">
<router-outlet></router-outlet>
</div>
</as-split-area>
</as-split>