? ? ? ? 因为目前是处于在angular项目中，所以下面分别一个记录简易的angular.js和在angular项目中使用的版本，仅供大家参考。
Angular.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Element with Angular Directive</title>
<style>
.resizable {
width: 200px;
height: 200px;
background-color: lightgray;
border: 1px solid #ccc;
overflow: auto;
position: relative;
}
.resize-handle {
width: 10px;
height: 10px;
background-color: #000;
position: absolute;
bottom: 0;
right: 0;
cursor: nwse-resize;
}
</style>
</head>
<body>
<div ng-app="resizableApp">
<div ng-controller="ResizableController">
<div resizable></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
angular.module('resizableApp', [])
.controller('ResizableController', function($scope) {
// 可以在这里添加控制器逻辑
})
.directive('resizable', function() {
return {
restrict: 'A',
link: function(scope, element) {
const resizableElement = element[0];
const resizeHandle = document.createElement('div');
resizeHandle.classList.add('resize-handle');
resizableElement.appendChild(resizeHandle);
let isResizing = false;
let initialX;
let initialY;
let originalWidth;
let originalHeight;
resizeHandle.addEventListener('mousedown', function(event) {
event.preventDefault();
isResizing = true;
initialX = event.clientX;
initialY = event.clientY;
originalWidth = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('width'));
originalHeight = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('height'));
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
});
function resize(event) {
if (isResizing) {
const width = originalWidth + (event.clientX - initialX);
const height = originalHeight + (event.clientY - initialY);
resizableElement.style.width = width + 'px';
resizableElement.style.height = height + 'px';
}
}
function stopResize() {
isResizing = false;
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', stopResize);
}
}
};
});
</script>
</body>
</html>
在Angular项目中
????????在 Angular 项目中可以将上述功能作为 Angular 指令在组件中使用。
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
? selector: '[resizable]'
})
export class ResizableDirective {
? private isResizing = false;
? private initialX: number;
? private initialY: number;
? private originalWidth: number;
? private originalHeight: number;
? constructor(private elementRef: ElementRef) {}
? @HostListener('document:mousemove', ['$event'])
? onMouseMove(event: MouseEvent) {
? ? if (this.isResizing) {
? ? ? const width = this.originalWidth + (event.clientX - this.initialX);
? ? ? const height = this.originalHeight + (event.clientY - this.initialY);
? ? ? this.elementRef.nativeElement.style.width = width + 'px';
? ? ? this.elementRef.nativeElement.style.height = height + 'px';
? ? }
? }
? @HostListener('document:mouseup')
? onMouseUp() {
? ? this.isResizing = false;
? }
? @HostListener('mousedown', ['$event'])
? onMouseDown(event: MouseEvent) {
? ? event.preventDefault();
? ? this.isResizing = true;
? ? this.initialX = event.clientX;
? ? this.initialY = event.clientY;
? ? this.originalWidth = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('width'));
? ? this.originalHeight = parseFloat(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('height'));
? }
}<div resizable class="resizable"></div>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResizableDirective } from './resizable.directive';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
ResizableDirective
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }