如何在Angular Material中添加顶部和左侧的调整大小功能

核心修改思路 #

原有右侧/底部resize只需要更新元素的width/height，但顶部/左侧resize需要同时调整元素的top/left坐标和对应尺寸，以下是具体实现步骤：

1. 模板添加顶部/左侧resize手柄 #

在你的可调整大小容器中新增顶部和左侧手柄元素：

<div class="resizable-box" 
     [style.width.px]="boxWidth" 
     [style.height.px]="boxHeight"
     [style.top.px]="boxTop"
     [style.left.px]="boxLeft">
  <!-- 顶部resize手柄 -->
  <div class="resize-handle resize-top" (mousedown)="startResize('top', $event)"></div>
  <!-- 左侧resize手柄 -->
  <div class="resize-handle resize-left" (mousedown)="startResize('left', $event)"></div>
  <!-- 原有右侧/底部手柄 -->
  <div class="resize-handle resize-right" (mousedown)="startResize('right', $event)"></div>
  <div class="resize-handle resize-bottom" (mousedown)="startResize('bottom', $event)"></div>
  
  <!-- 容器内容 -->
  <div class="box-content">可调整大小的内容</div>
</div>

2. 组件逻辑扩展resize处理 #

修改组件中的resize相关方法，新增顶部和左侧的坐标与尺寸计算逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  boxWidth = 300;
  boxHeight = 200;
  boxTop = 100;
  boxLeft = 100;
  isResizing = false;
  resizeStartState: { x: number; y: number; width: number; height: number; top: number; left: number };

  startResize(direction: string, event: MouseEvent) {
    this.isResizing = true;
    // 记录初始状态：鼠标位置、元素当前尺寸与坐标
    this.resizeStartState = {
      x: event.clientX,
      y: event.clientY,
      width: this.boxWidth,
      height: this.boxHeight,
      top: this.boxTop,
      left: this.boxLeft
    };
    // 绑定全局鼠标事件
    document.addEventListener('mousemove', (e) => this.handleResize(direction, e));
    document.addEventListener('mouseup', this.stopResize);
    event.preventDefault();
  }

  handleResize(direction: string, event: MouseEvent) {
    if (!this.isResizing) return;

    switch (direction) {
      case 'top':
        // 计算鼠标Y轴偏移量，同步更新top和height
        const yOffsetTop = event.clientY - this.resizeStartState.y;
        this.boxTop = this.resizeStartState.top + yOffsetTop;
        // 限制最小高度，避免容器消失
        this.boxHeight = Math.max(50, this.resizeStartState.height - yOffsetTop);
        break;
      case 'left':
        // 计算鼠标X轴偏移量，同步更新left和width
        const xOffsetLeft = event.clientX - this.resizeStartState.x;
        this.boxLeft = this.resizeStartState.left + xOffsetLeft;
        // 限制最小宽度
        this.boxWidth = Math.max(50, this.resizeStartState.width - xOffsetLeft);
        break;
      case 'right':
        const xOffsetRight = event.clientX - this.resizeStartState.x;
        this.boxWidth = Math.max(50, this.resizeStartState.width + xOffsetRight);
        break;
      case 'bottom':
        const yOffsetBottom = event.clientY - this.resizeStartState.y;
        this.boxHeight = Math.max(50, this.resizeStartState.height + yOffsetBottom);
        break;
    }
  }

  // 停止resize时解绑全局事件
  stopResize = () => {
    this.isResizing = false;
    document.removeEventListener('mousemove', this.handleResize);
    document.removeEventListener('mouseup', this.stopResize);
  };
}

3. CSS样式调整手柄位置 #

给顶部/左侧手柄添加定位样式，确保它们显示在正确位置并具备对应光标：

.resizable-box {
  position: absolute;
  border: 2px solid #ccc;
  background-color: #fff;
  overflow: hidden;
}

.resize-handle {
  position: absolute;
  background-color: #2196F3;
}

/* 顶部手柄：全屏宽，顶部对齐 */
.resize-top {
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  cursor: ns-resize;
}

/* 左侧手柄：全屏高，左侧对齐 */
.resize-left {
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
}

.resize-right {
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
}

.resize-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  cursor: ns-resize;
}

.box-content {
  padding: 16px;
}

关键注意点 #

• 顶部resize时，鼠标拖动的Y偏移量会同时改变元素的top和height（向上拖时top减小、height增大，向下拖则相反）
• 左侧resize时，X偏移量会同时改变元素的left和width（向左拖时left减小、width增大，向右拖则相反）
• 添加最小尺寸限制（示例中设为50px），防止容器被拖到无法识别的状态
• 使用箭头函数定义stopResize，确保解绑事件时this指向正确

内容的提问来源于stack exchange，提问作者Tuvia Khusid