tab反圆角实现vue

实现 Tab 反圆角效果的 Vue 方案

使用 CSS 自定义样式 通过 CSS 的 border-radius 和伪元素实现反圆角效果。为选中的 Tab 添加特定类名，通过负值调整圆角位置。

.tab-item {
  border-radius: 8px 8px 0 0;
  position: relative;
  overflow: hidden;
}

.tab-item.active {
  background: #fff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: #fff;
  border-radius: 0 0 8px 8px;
}

动态类名绑定 在 Vue 模板中使用 :class 动态绑定激活状态，结合点击事件切换 Tab。

<template>
  <div class="tabs">
    <div 
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab-item"
      :class="{ active: activeTab === index }"
      @click="activeTab = index"
    >
      {{ tab.title }}
    </div>
  </div>
</template>

使用 SVG 路径裁剪 对于更复杂的反圆角形状，可以通过 SVG 的 clip-path 实现自定义路径裁剪。

.tab-item.active {
  clip-path: path('M0,0 L100,0 L100,80 Q80,100 60,80 L40,80 Q20,100 0,80 Z');
}

组件化封装 将 Tab 逻辑封装为可复用组件，通过插槽和 props 控制内容和样式。

<template>
  <div class="custom-tabs">
    <slot 
      name="tab"
      v-for="(tab, index) in tabs"
      :tab="tab"
      :is-active="activeTab === index"
      @click="selectTab(index)"
    />
  </div>
</template>

响应式设计考虑 通过媒体查询调整圆角大小和间距，确保在不同屏幕尺寸下效果一致。

@media (max-width: 768px) {
  .tab-item {
    border-radius: 4px 4px 0 0;
  }
}