因为目前是处于在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 指令在组件中使用。
- 首先，创建一个名为 `resizable` 的自定义指令
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> - 最后，将 `ResizableDirective` 添加到您的 Angular 模块中
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 { }
