auto-height

自动计算容器剩余可用高度，通过插槽将高度值传递给子组件，实现自适应布局。，默认情况下使用dict-auto-height使用, 如果字典包配置中有配置componentsPreFix字段，请根据此字段的具体配置值进行前缀修改，如配置了componentsPreFix为Bu, 则使用bu-auto-height使用。

基本原理

组件依赖 Flex 纵向布局：父容器设置 display: flex; flex-direction: column，本组件设置 flex: 1，浏览器会自动将剩余空间分配给本组件。组件只需读取自身的实际渲染高度即可，无需手动计算，零累积误差。

┌─────────────────────────────┐
│         Header (固定)        │
├─────────────────────────────┤
│       FilterBar (固定)       │
├─────────────────────────────┤
│                             │
│   DictAutoHeight (flex: 1)  │  ← 自动填满剩余空间
│   ┌───────────────────────┐ │
│   │    Table / 内容区域    │ │  ← 通过 slot 获取 height
│   └───────────────────────┘ │
│                             │
└─────────────────────────────┘

Props

参数	类型	默认值	说明
listenDoms	Array	[]	auto-height外部需要监听的排除元素数组。元素尺寸变化时会触发重新计算高度
excludeDoms	Array	[]	auto-height内部需要排除的元素数组。元素尺寸变化时会触发重新计算高度
offset	Number | String	0	额外间距补偿（px），用于补偿页面边距、安全区域等。支持 300 或 "300px" 格式
minHeight	Number | String	300	最小高度（px）。支持 300 或 "300px" 格式
debounceDelay	Number	100	防抖延迟时间（ms）

Slot

插槽名	作用域参数	说明
default	{ height: number }	接收计算后的高度值（px，整数）

基本用法

前提条件

父容器必须是 Flex 纵向布局：

.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 或其他确定的高度 */
}

最简示例

<template>
  <div class="page-container">
    <div class="header">页面标题</div>

    <DictAutoHeight>
      <template #default="{ height }">
        <el-table :height="height" :data="tableData">
          <!-- 表格列 -->
        </el-table>
      </template>
    </DictAutoHeight>
  </div>
</template>

<script setup>
import DictAutoHeight from "@/components/DictAutoHeight.vue"
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
</style>

listenDoms和excludeDoms 用法

listenDoms和excludeDoms参数用于监听和排除元素尺寸变化。当监听的 数组中的元素尺寸发生变化时，组件会自动重新计算高度。支持以下类型：

类型	示例	说明
ref<HTMLElement>	headerRef	通过 ref 绑定的 DOM 元素
HTMLElement	document.querySelector('.bar')	直接传入 DOM 元素
Vue 组件实例	footerComponentRef	传入组件 ref，自动取其根 DOM（$el）
CSS 选择器字符串	'.filter-bar'	自动匹配所有匹配的元素

示例：排除多个元素

<template>
  <div class="page-container">
    <div ref="headerRef" class="header">标题栏</div>
    <div class="filter-bar">筛选条件</div>
    <FooterBar ref="footerRef" />

    <DictAutoHeight :listenDoms="[headerRef, '.filter-bar', footerRef]">
      <template #default="{ height }">
        <el-table :height="height" :data="tableData" />
      </template>
    </DictAutoHeight>
  </div>
</template>

<script setup>
import { ref } from "vue"
import DictAutoHeight from "@/components/DictAutoHeight.vue"
import FooterBar from "./FooterBar.vue"

const headerRef = ref(null)
const footerRef = ref(null)
</script>

完整参数示例

<template>
  <div class="page-container">
    <div ref="toolbarRef" class="toolbar">工具栏</div>

    <DictAutoHeight :listenDoms="[toolbarRef]" :offset="16" :min-height="400" :debounce-delay="200">
      <template #default="{ height }">
        <el-table :height="height" :data="tableData">
          <el-table-column prop="name" label="名称" />
          <el-table-column prop="value" label="值" />
        </el-table>
      </template>
    </DictAutoHeight>
  </div>
</template>

<script setup>
import { ref } from "vue"
import DictAutoHeight from "@/components/DictAutoHeight.vue"

const toolbarRef = ref(null)
</script>

注意事项

1. 父容器必须设置确定的高度（如 height: 100vh、height: 100%），否则 Flex 无法正确分配空间。
2. 父容器必须是 flex-direction: column，否则 flex: 1 不会按纵向分配剩余空间。
3. 组件内部已设置 min-height: 0，防止 Flex 子元素内容溢出，请勿覆盖该样式。
4. listenDoms 中的元素仅用于监听尺寸变化触发重算，不影响高度计算逻辑（高度由浏览器 Flex 布局自动分配）。
5. 高度值通过 Math.floor() 取整，返回整数像素值，避免小数像素导致的渲染问题。