【JS】根据容器宽度动态计算显示按钮数量

一、业务场景

• 表格外存在动态配置的多个操作按钮，要求随着页面宽度改变，对于显示不下的按钮收敛于下拉框选项中显示
• 标签行中展示多个标签，要求随着页面宽度改变，对于显示不下的标签收敛于下拉框选项中显示

二、需求分析

对以上两种业务场景，稍作分析就会发现其非常灵活，以至于我们无法仅根据按钮或标签的数组长度进行处理，只能在获知每个按钮/标签的真实宽度并进行计算后才能实现该需求。以下以按钮进行分析（标签情况一样）。

2.1、三个“不固定”

• 容器宽度不固定。该容器指包裹按钮的父元素，其根据浏览器窗口大小变化而变化。通常容器的宽度不会完全用来显示按钮（既不美观，也存在固定内容的展示，比如标题或者固定按钮），因此需根据容器宽度变化，并减去固定内容的宽度，实时计算可用于显示按钮的可用宽度。
• 按钮数量不固定。当可用宽度不够显示所有按钮，则显示“更多”按钮，将显示不下的按钮收敛其中
• 按钮宽度不固定。按钮宽度由内容决定，按钮文字长度不固定，按钮是否存在图标不固定，因此计算可用宽度能最多显示多少个按钮，这便是适用宽度，避免按钮被截断。

2.2、可得出如下计算公式：

可用宽度 = 容器宽度 - 固定内容宽度；
适用宽度 = 【累加（按钮宽度 + 按钮间距）】 <= 可用宽度；

三、解决方案

3.1、通过ref标识操作行容器、右侧固定内容、左侧按钮显示内容，以备后续计算宽度。

3.2、计算可用宽度，由于操作行中右侧存在固定内容，需在容器宽度基础上减去固定内容宽度，并为了显示样式更好看，只用剩余宽度的一半作为可用宽度，来展示按钮。

3.3、计算适用宽度，遍历所有按钮累加每个按钮宽度，直到超过可用宽度，得出在可用宽度内最多能显示的按钮数量，意味着剩余按钮需收敛至“更多”按钮。【注意：所有按钮在行容器中都进行了渲染（为了获取每个按钮渲染出来的实际宽度），但通过样式overflow:hidden隐藏超过适用宽度的内容，并通过visibility:hidden隐藏被收敛的按钮】

3.4、监听视窗变化事件，动态计算可用宽度和适用宽度。