尺寸监听指令

v-tui-resize 是 TechUI 提供的高性能尺寸监听指令。 它基于浏览器原生的 ResizeObserver API，能够实时捕获元素的宽、高变化。相比于直接使用原生 API，该指令提供了更便捷的声明式写法，自动处理监听器的挂载与销毁，并内置了节流机制以优化性能。

核心特性

• 声明式调用：无需手动实例化 ResizeObserver，直接在模板中绑定。
• 性能优化：内置 duration 配置，防止高频触发导致页面卡顿（默认 200ms）。
• 动态控制：支持通过 disabled 属性动态开启或暂停监听。
• 自动销毁：组件卸载时自动断开观察，防止内存泄漏。

基础用法

简易模式（仅回调）

如果只需要监听变化而不需要额外配置，可以直接传入一个回调函数。 回调函数会接收一个包含 { width, height } 的对象。

<script setup>
const handleResize = ({ width, height }) => {
  console.log('当前尺寸:', width, height);
};
</script>

<template>
  <div class="box" v-tui-resize="handleResize">
    Resize Me
  </div>
</template>

配置模式（对象参数）

通过传入对象，可以配置节流时间、禁用状态或组件 ID。

<template>
  <div 
    class="chart-container"
    v-tui-resize="{ 
      callback: updateChart, 
      duration: 500,       // 设置 500ms 的节流延迟
      disabled: isHidden   // 当元素隐藏时停止监听以节省资源
    }"
  >
    </div>
</template>

API 参考

v-tui-resize 接收一个 函数 或 对象。当传入对象时，支持以下属性：

参数名	说明	类型	默认值
callback	回调函数。尺寸变化时触发，参数为 { width, height }。	Function	—
disabled	禁用开关。设置为 true 时会断开监听器。支持动态切换。	Boolean	false
duration	节流时间。两次回调触发的最小间隔（毫秒），用于减少高频渲染开销。	Number	200
uid	唯一标识。用于内部 tResize 工具库区分实例，通常自动生成。	String	genUid('vResize')
cid	组件 ID。用于 TechUI 内部核心系统的组件有效性验证 (cidVaild)。	String	—

典型案例

自适应容器 (Adaptive Container)

在 TechUI 的大屏适配方案中，需要监听容器尺寸变化来计算缩放比例。这里使用了 uid 来确保实例的唯一性。

<template>
  <div 
    id="tuiAdpt" 
    class="tui-adpt-container"
    v-tui-resize="{ 
      callback: adptResizeCounter, 
      uid: 'adpt-main-observer' 
    }"
  >
    </div>
</template>

滚动条更新 (Scroll Update)

在自定义滚动条组件中，当内容区域大小改变（例如加载了更多数据）时，需要重新计算滚动条长度。通过动态 disabled 属性，可以在不需要监听时（例如初始化未完成时）暂停观察。

<template>
  <div
    class="tui-scroller-outer"
    v-tui-resize="{
      callback: initSize,           // 尺寸变化时重置滚动条
      disabled: !inited,            // 初始化前不监听
      duration: 100                 // 提高响应速度
    }" 
  >
    </div>
</template>

技术细节

生命周期管理

• Mounted: 解析配置，创建 uid，如果未禁用则调用 tResize.o (Observe) 开始监听。
• Updated: 对比新旧 disabled 状态。如果从 false 变为 true，调用 tResize.d (Disconnect) 停止监听；反之则重新连接。
• Unmounted: 强制调用 stopResize，清理所有观察者，确保无残留。

依赖项

此指令依赖 TechUI 的工具库：

import { tResize, genUid, tType } from "@techui/utils";

• tResize: 封装了 ResizeObserver 的核心工具类，负责处理具体的 DOM 观察和回调分发。
• genUid: 生成唯一 ID。