有限空间下实现内容折叠至下拉菜单的巧妙方法
许多应用场景需要在有限空间内显示大量内容。当内容超出容器宽度时，需要一种机制将其折叠并以下拉菜单的形式展示。本文将深入探讨如何实现此效果，并提供代码示例。
核心思路是判断元素总宽度是否超过容器宽度。若超过，则隐藏超出部分内容，并创建一个下拉菜单显示隐藏内容。这需要计算每个元素的宽度并累加已显示元素的总宽度。当总宽度超过容器宽度时，将后续元素添加到下拉菜单中。
以下代码片段展示了算法核心逻辑。为简化，代码使用固定宽度，实际应用中需动态获取元素宽度。
// 为简化，此处使用固定宽度，实际应用中需动态获取宽度
const ITEM_WIDTH = 50;
const CONTAINER_WIDTH = 200;
const menus = ['元素', '控制台', '来源', '网络', '时间线'];
const menuObj = menus.reduce(
(acc, curr) => {
// 已显示菜单项总宽度
const visibleTotalWidth = acc.visibleMenus.length * ITEM_WIDTH;
// 已显示菜单项总宽度加上当前菜单项宽度
const nextVisibleTotalWidth = visibleTotalWidth + ITEM_WIDTH;
// 超过容器宽度，则溢出，将其放入额外菜单项数组
if (nextVisibleTotalWidth > CONTAINER_WIDTH) {
acc.extraMenus.push(curr);
} else {
acc.visibleMenus.push(curr);
}
return acc;
},
{
visibleMenus: [],
extraMenus: [],
}
);
console.log('menuObj', menuObj);
// extraMenus: Array[1]
// 0: "时间线"
// visibleMenus: Array[4]
// 0: "元素"
// 1: "控制台"
// 2: "来源"
// 3: "网络"
这段代码首先定义每个菜单项的宽度 ITEM_WIDTH，容器宽度 CONTAINER_WIDTH，以及菜单项数组 menus。reduce 函数迭代处理每个菜单项，累加已显示菜单项的宽度。如果总宽度超过容器宽度，则将该菜单项添加到 extraMenus 数组（下拉菜单内容），否则添加到 visibleMenus 数组（直接显示在容器中的内容）。最终，menuObj 对象包含需要直接显示的菜单项和需要放入下拉菜单的菜单项。实际应用中，需要根据 menuObj 的结果动态生成 HTML 结构，以实现可视化效果。 虽然一些插件可以实现类似功能，但自行实现能够更好地控制细节并与现有系统集成。
