如何解决Angular 8 Resize元素指令-设置元素的最大和最小尺寸调整宽度
我创建了一个用于水平调整元素大小的指令。它完全可以正常工作,但是我有一个问题,一旦用户将鼠标左移或右移太大,光标位置就无法正确计算。例如,这会导致用户将侧边栏的大小调整得过多,然后再次将其调整为右侧,则需要相应地将鼠标向右推,即向左推了多少。
我在CSS中添加了max-width和min-width属性,因此element的行为完全符合预期,但不符合逻辑。这是我的指令:
import {Directive,ElementRef,HostListener,OnDestroy,OnInit} from '@angular/core';
import {fromEvent,Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
@Directive({
selector: '[resizer]'
})
export class ResizeDirective implements OnInit,OnDestroy {
width: number;
oldX = 0;
grabber = false;
destroy$ = new Subject();
constructor(private el: ElementRef) { }
ngOnInit() {
this.width= parseInt(this.el.nativeElement.parentNode.offsetWidth,10);
}
@HostListener('document:mouseup',['$event'])
onMouseUp(): void {
this.grabber = false;
this.destroy$.next();
}
@HostListener('mousedown',['$event']) onResize(event: MouseEvent,resizerCallback?: Function) {
this.grabber = true;
this.oldX = event.clientX;
event.preventDefault();
this.addMouseMoveListener();
}
resizer(offsetY: number): void {
this.width += offsetX;
this.el.nativeElement.parentNode.style.width= this.width+ 'px';
}
addMouseMoveListener(): void {
fromEvent(document,'mousemove')
.pipe(takeUntil(this.destroy$))
.subscribe(this.mouseMoveCallback.bind(this));
}
mouseMoveCallback(event: MouseEvent): void {
if (!this.grabber) {
return;
}
this.resizer(event.clientX- this.oldX);
this.oldX = event.clientX;
}
ngOnDestroy() {
this.destroy$.next();
}
}
我的问题是,是否可以在此处设置最大元素宽度和最小元素宽度来停止mousedown事件?例如,如果element具有40vw
,则停止调整大小并进行计算;因此,如果element具有25vw
,则停止mousedown事件?
我的第二个想法是在鼠标按下时阻止光标调整侧栏的大小,以避免光标移到调整侧栏的大小,但是我不知道如何实现。
我的第三个想法是重置oldX变量以调整边栏位置的大小。
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。