javascript - 动态设置文本宽度

Question

我创建了一个选项卡组件，我无法实现的部分是，我只需要设置文本宽度而不是 TabIndicator 来完全占用选项卡容器的长度。

由于每个文本都有不同的宽度，我使用 js 来计算它，但我没有获取宽度，而是能够获取容器宽度。

如何使事件的 TabIndicator 行仅从文本的开头扩展到文本的结尾。

我能够达到容器宽度。为此添加沙箱链接。

Sandbox

Answer 1

很简单。在计算指标的起点和宽度时，您需要减去额外的填充。
.tab 有 6px 水平填充
.tab-default-container 在桌面上有 1rem 填充，它是 16px
。所以更改代码如下:

if (tabMeta && tabsMeta) {
 startValue = tabMeta.left - tabsMeta.left + tabsMeta.scrollLeft + 22; //16+6=22
}

//22 from both sides = 44px tor remove.
const newIndicatorStyle = {
   left: startValue,
   width: tabMeta ? tabMeta.width - 44 : 0
};

已更新 sandbox .
注意:您使用的相对单位 rem 它可能在不同的设置和设备上评估不同，它可能不是 1rem=16px。

The rem (for “root em”) is the font size of the root element of the document.

考虑到这一点，计算也是如此。