如何实现空间不足折叠展示在下拉框中的效果？

Question

这种空间不足则折叠展示在下拉框中的效果，如何实现呢？是否有插件呢

有无大佬帮忙解答下呢

Answer 1

插件是有，但是可能没法很好的嵌入你的系统，所以建议自己实现。

原理比较简单，计算每个元素的宽度，是否超过容器的宽度，如果超过，则将当前元素塞进弹出层，否则展示。

示例：

// 这里为了简单，直接给单个元素和容器固定宽度，实际情况一般会需要动态获取宽度
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: "网络"