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

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: "网络"