Vue3标签组件实现滚动时隐藏滚动条的方法

一、自定义CSS实现滚动条隐藏 #

vue3-tabs-component的标签导航容器默认类名为.tabs-nav，可通过以下CSS实现隐藏滚动条同时保留横向滚动功能：

/* Chrome、Edge、Safari 适配 */
.tabs-nav::-webkit-scrollbar {
  display: none;
}

/* Firefox 适配 */
.tabs-nav {
  scrollbar-width: none;
  -ms-overflow-style: none; /* IE/Edge 旧版本兼容 */
}

/* 确保标签栏可横向滚动 */
.tabs-nav {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

如果使用组件的scoped样式，需要添加深度选择器，比如::v-deep .tabs-nav。

二、调整组件结构修复样式失效问题 #

你当前的代码将<tab>嵌套在.card .p-3内部，可能导致组件默认样式失效。正确的结构应该是<tab>直接作为<tabs>的子元素，内容放在<tab>内部：

<tabs class="mt-4">
  <tab name="مشخصات ساختمان">
    <div class="card">
      <div class="p-3">
        <BuildingInfoEdit :categoryList="categoryList" :id="id"/>
      </div>
    </div>
  </tab>
  <!-- 其余tab标签按此结构调整 -->
</tabs>

三、替代组件推荐 #

如果vue3-tabs-component的定制性无法满足需求，可考虑以下Vue3标签组件：

• Element Plus Tabs：支持标签滚动、滚动条隐藏，自带多种样式，适配RTL布局，文档完善。
• PrimeVue TabView：提供灵活的滚动配置，支持自定义模板，对RTL布局友好。
• Vuetify Tabs：Material Design风格，内置滚动标签功能，可通过配置隐藏滚动条。

内容的提问来源于stack exchange，提问作者Sanaz Baghban