tab反圆角实现vue
tab反圆角实现vue
在Vue中实现tab反圆角效果，可以通过CSS样式和动态类名结合实现。反圆角通常指在选中的tab项上取消圆角，使其呈现直角效果，同时未选中的tab项保持圆角样式。
基本实现思路
定义一个包含多个tab项的组件，通过v-for循环渲染tab列表。使用动态类名绑定，根据当前选中的tab项应用不同的样式。
<template>
<div class="tab-container">
<div
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ 'tab-item-active': activeTab === index }"
@click="activeTab = index"
>
{{ tab }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
activeTab: 0,
};
},
};
</script>CSS样式设置
通过CSS设置tab的基本样式，并为选中的tab项应用反圆角效果。使用border-radius属性控制圆角，选中时将其设置为0。
.tab-container {
display: flex;
gap: 0;
}
.tab-item {
padding: 10px 20px;
background: #f0f0f0;
border-radius: 10px 10px 0 0;
cursor: pointer;
border: 1px solid #ccc;
margin-right: -1px;
}
.tab-item-active {
background: #fff;
border-bottom: 1px solid #fff;
border-radius: 0;
z-index: 1;
}动态效果增强
为选中的tab项添加高亮效果，同时通过z-index确保选中的tab项覆盖相邻的tab项，避免边框重叠问题。
.tab-item:hover {
background: #e0e0e0;
}
.tab-item-active:hover {
background: #fff;
}完整示例代码
以下是一个完整的Vue组件示例，实现了tab反圆角效果：
<template>
<div class="tab-container">
<div
v-for="(tab, index) in tabs"
:key="index"
class="tab-item"
:class="{ 'tab-item-active': activeTab === index }"
@click="activeTab = index"
>
{{ tab }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
activeTab: 0,
};
},
};
</script>
<style>
.tab-container {
display: flex;
gap: 0;
}
.tab-item {
padding: 10px 20px;
background: #f0f0f0;
border-radius: 10px 10px 0 0;
cursor: pointer;
border: 1px solid #ccc;
margin-right: -1px;
}
.tab-item-active {
background: #fff;
border-bottom: 1px solid #fff;
border-radius: 0;
z-index: 1;
}
.tab-item:hover {
background: #e0e0e0;
}
.tab-item-active:hover {
background: #fff;
}
</style>注意事项
- 确保tab项的margin-right设置为负值，以消除边框重叠。
- 使用z-index提升选中tab项的层级，避免边框被遮挡。
- 根据实际需求调整border-radius的值，控制圆角大小。
