useResizable

使元素可调整大小，提供尺寸和调整状态管理。

函数签名

function useResizable(
  target: Ref<HTMLElement | null>,
  options?: ResizableOptions
): {
  width: Ref<number>
  height: Ref<number>
  isResizing: Ref<boolean>
  style: ComputedRef<{ width: string; height: string }>
}

interface ResizableOptions {
  initialWidth?: number
  initialHeight?: number
  minWidth?: number
  minHeight?: number
  maxWidth?: number
  maxHeight?: number
  handles?: ResizeHandle[]
  onStart?: (size: { width: number; height: number }) => void
  onResize?: (size: { width: number; height: number }) => void
  onEnd?: (size: { width: number; height: number }) => void
}

type ResizeHandle = 'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw'

参数

参数名	类型	必填	默认值	说明
target	Ref<HTMLElement | null>	是	-	目标元素的 ref
options.initialWidth	number	否	200	初始宽度
options.initialHeight	number	否	200	初始高度
options.minWidth	number	否	50	最小宽度
options.minHeight	number	否	50	最小高度
options.maxWidth	number	否	Infinity	最大宽度
options.maxHeight	number	否	Infinity	最大高度
options.handles	ResizeHandle[]	否	['se']	调整手柄位置

返回值

类型	说明
{ width, height, isResizing, style }	尺寸状态和样式对象

工作原理

1. 在元素上创建调整手柄（handles）
2. 监听手柄的 mousedown 事件
3. 记录起始鼠标位置和元素尺寸
4. 在 mousemove 中计算新尺寸：
   • 根据手柄方向（n/e/s/w 等）调整宽度和高度
   • 应用 min/max 限制
   • 更新 width 和 height ref
5. 在 mouseup 时停止调整
6. 返回计算后的样式对象

支持 8 个方向的调整手柄，自动限制尺寸范围。