font-weight引发Tab,active抖动，非伪元素

问题：普通文字的font-weight是normal，要求hover的时候font-weight变化为bold。 而font-weight变化时文字所占空间会变化，导致元素排布，上一个或者下一个元素会因此位移，而你不想这样。应该怎么做？

用一个一模一样的active状态元素去占位，但是visibility设置为Hidden。再放置原来的元素，但是改成position:absolute。不会和active状态元素占位置。

 <view
      :class="['tab-item', isZH ? 'tab-item-center' : '']"
      v-for="(tab, index) in tabList"
      :key="tab.title"
      @tap="changTab(tab, index)"
    >
      <view class="tab-item-inner">
        <text
          :class="[
            modelValue == tab.title
              ? 'tab-item-text-active'
              : 'tab-item-text-normal',
            'displayed-text',
          ]"
          >{{ tab.label }}</text
        >
        <text class="tab-item-text-active hidden-text">{{ tab.label }}</text
        >
      </view>
 </view>   
 <style>
 .hidden-text{
  display: block;
  visibility: hidden;
  overflow: hidden;
}
.displayed-text{
  position: absolute;
}
.tab-item-text-normal {
  font-weight: normal;
}

.tab-item-text-active {
  font-weight: bold;
}
</style>
    ```