按钮太多了？基于ResizeObserver优雅显示

引言：列表操作按钮的困境

在日常开发中，我们经常遇到这样的场景：数据表格的每一行都有多个操作按钮，如编辑、删除、查看、审核等。随着业务复杂度增加，按钮数量可能达到5个、8个甚至更多。这带来两个核心问题：

1. 空间冲突：在小屏幕或内容密集的列中，按钮会溢出容器边界
2. 视觉混乱：过多的按钮挤在一起，用户难以快速定位所需操作

传统解决方案通常是固定显示几个核心按钮，其余收起到下拉菜单。但这种方式不够智能：无论容器多宽，都显示固定数量的按钮，无法充分利用可用空间。

本文将介绍一种基于ResizeObserver的动态按钮显示方案，它能根据容器宽度智能决定显示哪些按钮，既优雅又高效。

核心思路：响应式按钮布局

我们的目标是创建一个自适应组件，它能够：

1. 实时监测容器宽度变化
2. 根据可用空间动态计算可以显示多少个按钮
3. 将超出空间的按钮自动收起到"更多"下拉菜单
4. 在空间充足时，尽可能多地显示按钮

关键技术：ResizeObserver API

ResizeObserver是现代浏览器提供的API，用于监听元素尺寸变化。相比传统的window.resize事件，它有两大优势：

javascript

// 传统方式：监听整个窗口
window.addEventListener('resize', () => {
  // 性能较差，触发频繁
});

// ResizeObserver：监听特定元素
const observer = new ResizeObserver((entries) => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    // 精确控制，性能更优
  }
});
observer.observe(element);

ResizeObserver只会监听我们关注的元素，并且提供了更精确的尺寸信息，是响应式布局的理想工具。

组件实现详解

1. 组件接口设计

首先定义清晰的组件接口，这是良好组件的基石：

typescript

interface Button {
  // 按钮文本，支持动态函数
  label: string | ((row: any) => string)
  // 动态属性，如type、size等
  otherProps?: any
  // 图标，支持动态函数
  icon?: string | ((row: any) => string)
  // 额外CSS类
  class?: string
  // 可见性判断函数
  visibleHandler?: (row: any, index?: number) => boolean
  // 禁用状态判断函数
  disabledHandler?: (row: any, index?: number) => boolean
  // 点击处理函数
  handler: (row: any, index?: number) => void
}

这种设计支持高度动态化的按钮配置，每个按钮都可以根据行数据决定其显示、禁用状态和属性。

2. 智能宽度计算

核心逻辑在于如何准确估算每个按钮的宽度：

typescript

const estimateButtonWidth = (button) => {
  // 图标按钮：图标宽度 + 内边距
  if (button.icon) return 16 + 8
  
  // 文本按钮：字符数 × 单个字符宽度 + 内边距
  const text = typeof button.label === 'function' 
    ? button.label(props.data) 
    : button.label
  return text.length * 14 + 12
}

这个估算公式是关键，需要根据实际设计调整乘数和常数。更精确的方法是使用Canvas的measureText方法，但会增加复杂度。

3. 动态布局算法

typescript

const handleResize = () => {
  const containerWidth = containerRef.value?.clientWidth
  const buttonWidths = buttons.value.map(estimateButtonWidth)
  let totalWidth = 0
  let maxVisibleButtons = 0

  // 计算最多能显示多少个按钮
  for (let i = 0; i < buttonWidths.length; i++) {
    totalWidth += buttonWidths[i]
    
    // 考虑按钮间距（如果有的话）
    const spacing = i === buttonWidths.length - 1 ? 0 : 30
    
    if (totalWidth + spacing <= containerWidth) {
      maxVisibleButtons = i + 1
    } else {
      break
    }
  }

  // 优化：如果隐藏按钮只有一个，且空间几乎足够，就显示它
  if (
    maxVisibleButtons < buttons.value.length &&
    state.hiddenButtons.length === 1 &&
    totalWidth - 8 <= containerWidth
  ) {
    maxVisibleButtons += 1
  }

  // 更新按钮分组
  state.visibleButtons = buttons.value.slice(0, maxVisibleButtons)
  state.hiddenButtons = buttons.value.slice(maxVisibleButtons)
}

算法考虑了按钮间距，并包含了一个优化逻辑：当只有一个按钮被隐藏且空间接近足够时，稍微调整布局以显示它。

4. 生命周期管理

typescript

let resizeObserver

onMounted(() => {
  handleResize() // 初始计算
  resizeObserver = new ResizeObserver(handleResize)
  resizeObserver.observe(containerRef.value)
})

onBeforeUnmount(() => {
  resizeObserver?.unobserve(containerRef.value)
})

确保在组件销毁时清理观察器，避免内存泄漏。

使用示例

vue

<template>
  <a-table :data-source="data">
    <a-table-column title="操作" width="200">
      <template #default="{ record, index }">
        <MoreButton 
          :data="record" 
          :data-index="index"
          :button-list="getButtons(record)"
        />
      </template>
    </a-table-column>
  </a-table>
</template>

<script setup>
import MoreButton from './MoreButton.vue'

const getButtons = (record) => [
  {
    label: '编辑',
    handler: () => editItem(record),
    visibleHandler: () => record.status !== 'deleted'
  },
  {
    label: '删除',
    handler: () => deleteItem(record),
    disabledHandler: () => record.status === 'processing'
  },
  {
    label: '查看详情',
    icon: 'icp-chakanxiangqing',
    handler: () => viewDetail(record)
  },
  {
    label: '审核',
    otherProps: (row) => ({
      type: row.needAudit ? 'primary' : 'default'
    }),
    handler: () => auditItem(record)
  },
  // 更多按钮...
]
</script>

性能优化建议

1. 防抖处理

typescript

import { debounce } from 'lodash-es'

const handleResize = debounce(() => {
  // 计算逻辑
}, 100)

2. 缓存计算结果

typescript

const widthCache = new Map()

const estimateButtonWidth = (button) => {
  const cacheKey = JSON.stringify(button)
  if (widthCache.has(cacheKey)) {
    return widthCache.get(cacheKey)
  }
  
  // 计算宽度
  const width = button.icon ? 24 : getlabel(button.label).length * 14 + 12
  widthCache.set(cacheKey, width)
  return width
}

3. 虚拟化支持

对于超长列表，可以结合表格虚拟化技术，只渲染可视区域内的行。

对比传统方案

方案	优点	缺点
固定数量	实现简单	无法自适应，空间浪费
CSS媒体查询	响应式	断点固定，不够灵活
ResizeObserver方案	完全自适应，精准控制	实现较复杂，需要考虑性能

扩展思考

1. 支持优先级

可以为按钮添加优先级属性，确保重要操作始终可见：

typescript

interface Button {
  priority?: number // 1-10，数值越小优先级越高
}

2. 动画过渡

添加按钮显示/隐藏的过渡动画，提升用户体验：

css

.dynamic-button {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

3. 移动端适配

在移动端可以切换到垂直布局或操作面板：

javascript

const isMobile = computed(() => window.innerWidth < 768)

总结

基于ResizeObserver的动态按钮显示方案，通过智能的空间计算和响应式布局，解决了按钮过多时的显示问题。这种方案的优势在于：

1. 完全自适应：根据实际可用空间动态调整
2. 用户友好：尽可能多地显示直接操作，减少点击次数
3. 维护性好：组件化设计，便于复用和扩展
4. 性能可控：精确监听，避免不必要的重排重绘

在实际项目中，这种组件的应用可以显著提升表格操作区的用户体验，特别是在复杂的管理后台系统中。它体现了现代前端开发的核心思想：以用户为中心，通过技术手段创造更智能、更优雅的交互体验。

最佳实践提示：对于数据量大的表格，建议结合虚拟滚动技术使用，避免ResizeObserver观察过多元素导致的性能问题。