Office UI Fabric JS Pivot组件无链接项溢出功能问题求助

我之前也碰到过这个情况，原生的Office UI Fabric JS Pivot组件默认的溢出处理真的只是个视觉上的省略号，完全没有交互功能。不过咱们可以通过自定义扩展来搞定，这里分享两个实用的方案：

方案一：自定义溢出下拉菜单 #

这个方案会把超出容器的Pivot项自动转移到一个下拉菜单里，用户点击菜单就能访问所有溢出的选项，体验更友好。

实现步骤： #

1. 先在Pivot组件旁边添加一个Fabric的Dropdown组件，默认隐藏
2. 监听窗口的resize事件，同时在组件初始化时计算Pivot容器和每个项的宽度
3. 判断哪些项会溢出容器，把这些项从Pivot中移除，添加到Dropdown的选项列表里
4. 处理Dropdown的选中事件，同步更新Pivot的激活状态

代码示例： #

// 初始化Pivot和Dropdown
const pivot = document.querySelector('.ms-Pivot');
const overflowDropdown = document.querySelector('.ms-Dropdown');
const pivotItems = Array.from(pivot.querySelectorAll('.ms-Pivot-link'));

function handlePivotOverflow() {
  const containerWidth = pivot.offsetWidth;
  let totalWidth = 0;
  const visibleItems = [];
  const overflowItems = [];

  // 计算每个项的宽度总和
  pivotItems.forEach(item => {
    totalWidth += item.offsetWidth;
    if (totalWidth > containerWidth) {
      overflowItems.push(item);
    } else {
      visibleItems.push(item);
    }
  });

  // 更新Pivot和Dropdown的内容
  if (overflowItems.length > 0) {
    overflowDropdown.style.display = 'block';
    // 清空Dropdown原有选项
    const dropdownOptions = overflowDropdown.querySelector('.ms-Dropdown-options');
    dropdownOptions.innerHTML = '';
    // 添加溢出项到Dropdown
    overflowItems.forEach(item => {
      const option = document.createElement('option');
      option.value = item.getAttribute('data-content');
      option.textContent = item.textContent;
      dropdownOptions.appendChild(option);
      // 从Pivot中移除溢出项
      item.remove();
    });
    // 把可见项重新添加回Pivot
    visibleItems.forEach(item => {
      pivot.querySelector('.ms-Pivot-links').appendChild(item);
    });
  } else {
    overflowDropdown.style.display = 'none';
    // 把所有项放回Pivot
    pivotItems.forEach(item => {
      pivot.querySelector('.ms-Pivot-links').appendChild(item);
    });
  }
}

// 初始化时执行一次
handlePivotOverflow();
// 监听窗口 resize
window.addEventListener('resize', handlePivotOverflow);

// 处理Dropdown选中事件
overflowDropdown.addEventListener('change', (e) => {
  const selectedValue = e.target.value;
  // 模拟Pivot项的点击
  const pivotLink = pivotItems.find(item => item.getAttribute('data-content') === selectedValue);
  if (pivotLink) {
    pivotLink.click();
  }
});

方案二：让Pivot项自动换行 #

如果你的场景允许Pivot项换行显示，这个方案更简单，只需要修改CSS就能实现：

.ms-Pivot-links {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
}

.ms-Pivot-link {
  white-space: nowrap;
}

这样当容器宽度不够时，Pivot项会自动换行显示所有内容，不用处理溢出菜单。不过需要注意调整Pivot的下划线样式，默认的下划线是针对横向排列的，换行后可能需要修改.ms-Pivot-is-selected::after的样式，让它只在当前项下方显示。

注意事项 #

• 尽量不要直接修改Fabric的源码，不然后续组件升级的时候会很麻烦，用自定义扩展的方式更稳妥
• 方案一的代码需要根据你实际的DOM结构调整选择器，确保能正确选中Pivot项和Dropdown组件

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