<template>
<div :class="$options.name">
<div class="tab">默认选项卡</div>
<div class="tab" active>选中选项卡</div>
<el-divider />
<el-tabs v-model="tabActiveName" @tab-click="(tab, event) => {}" type="">
<el-tab-pane
:label="tab.label"
:name="tab.value.toString()"
v-for="(tab, index) in tabs"
:key="index"
:disabled="tab.disabled"
>
<span slot="label">
<el-badge
:value="(tab.badge || {}).value"
:max="99"
:type="(tab.badge || {}).type || `danger`"
:hidden="!tab.badge"
>
{{ tab.label }}
</el-badge>
</span>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: "demo",
data() {
return {
tabs: [
{ value: 1, label: "显示文本1" },
{ value: 2, label: "显示文本2" },
{ value: 3, label: "显示文本3" },
],
tabActiveName: "1", //name必须是String类型,否者tab默认样式聚焦状态下不会显示下划线
};
},
};
</script>
<style lang="scss" scoped>
.demo {
>>> .el-tabs__active-bar {
display: none;
}
>>> .el-tabs__item,
.tab {
// transform: perspective(30px) rotateX(20deg);//3D立体效果
$backgroundColor: #bedeff;
$backgroundColorAcitve: #409eff;
$cornerWidth: 15px;
$cornerHeight: 15px;
$tabHeight: 40px;
// ----------------------------------------
box-sizing: border-box;
padding: 0 20px !important;
width: max-content;
height: $tabHeight;
background-color: $backgroundColor;
border-radius: $cornerWidth $cornerWidth 0 0;
position: relative;
transform-origin: center bottom;
display: inline-flex;
justify-content: center;
align-items: center;
color: $backgroundColorAcitve;
@mixin leftBg($backgroundColor: $backgroundColorAcitve) {
background: radial-gradient(
circle at 0 0,
transparent $cornerWidth,
$backgroundColor $cornerWidth
);
}
@mixin rightBg($backgroundColor: $backgroundColorAcitve) {
background: radial-gradient(
circle at 100% 0,
transparent $cornerWidth,
$backgroundColor $cornerWidth
);
}
&::before,
&::after {
content: "";
position: absolute;
width: $cornerWidth;
height: $cornerWidth;
bottom: 0;
}
&::before {
left: -$cornerWidth;
@include leftBg($backgroundColor);
}
&::after {
right: -$cornerWidth;
@include rightBg($backgroundColor);
}
&[active],
&.active,
&.is-active {
z-index: 1;
$backgroundColor: $backgroundColorAcitve;
color: white;
background-color: $backgroundColor;
&::before {
@include leftBg($backgroundColor);
}
&::after {
@include rightBg($backgroundColor);
}
}
}
}
</style>