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

一、业务场景

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

二、需求分析

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

2.1、三个“不固定”

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

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

可用宽度 = 容器宽度 - 固定内容宽度；