tabs自定义样式-编程知识

tabs自定义样式

在这里插入图片描述

使用el-tabs 去修改样式的话比较麻烦，索性直接用div来制作。

<div class="contain"><div class="tab_wrap"><div :class="['skew', 'first', active == '1' ? 'isActive': '']" @click="tabClick(1)"><span class="tabs__name">需求列表</span></div><div :class="['skew', 'second',active == '2' ? 'isActive': '']" @click="tabClick(2)"><span class="tabs__name">测试任务</span></div><div :class="['skew', 'third',active == '3' ? 'isActive': '']" @click="tabClick(3)"><span class="tabs__name">缺陷查看</span></div></div></div>

<script>
export default {data() {return {active: '1'}},methods: {tabClick(tab) {this.active = tab + ''}}
}
</script>

css有点烂轻喷，先凑合实现吧。重复的样式代码太多了，没做处理。如果有同学优化了的可以打在评论区哦

<style lang="scss">
.contain {width: 100%;height: 100%;padding: 24px;
}
.tab_wrap {display: flex;border-bottom: 1px solid #ccc;
}
.skew {position: relative;width: 120px;height: 40px;
}
.first::before {content: "";position: absolute;top: 0;right: 20px;width: 100px;height: 40px;border-radius: 10px 10px 0 0;background: #e0e8f6;
}
.first::after {content: "";position: absolute;top: 0;left: 6px;right: 0;bottom: 0;border-radius: 10px 10px 0 0;background: #e0e8f6;transform: skewX(15deg);
}
.first {&.isActive::before {content: "";position: absolute;top: 0;right: 20px;width: 100px;height: 40px;border-top: 1px solid #ccc;border-left: 1px solid #ccc;border-radius: 10px 0;background: #fff;}&.isActive::after {content: "";position: absolute;top: 0;left: 6px;right: 0;bottom: 0;border-top: 1px solid #ccc;border-radius: 10px 10px 0 0;background: #fff;transform: skewX(15deg);}
}.second::before {content: "";position: absolute;top: 0;right: 13px;width: 100px;height: 40px;border-radius: 10px 10px 0 0;background: #e0e8f6;
}
.second::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 10px 10px 0 0;background: #e0e8f6;transform: skewX(15deg);
}
.second {&.isActive::before {content: "";position: absolute;top: 0;right: 30px;width: 100px;height: 40px;border-top: 1px solid #ccc;border-radius: 10px 10px 0 0;background: #fff !important;transform: skewX(-10deg);}&.isActive::after {content: "";position: absolute;top: 0;left: -4px;right: 0;bottom: 0;border-top: 1px solid #ccc;border-radius: 10px;background: #fff !important;transform: skewX(15deg);}
}.third::before {content: "";position: absolute;top: 0;right: -13px;width: 100px;height: 40px;border-radius: 10px 10px 0 0;background: #a8c7fa;
}
.third::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-radius: 10px 10px 0 0;background: #a8c7fa;transform: skewX(15deg);
}
.third {&.isActive::before {content: "";position: absolute;top: 0;right: -13px;width: 100px;height: 40px;border-top: 1px solid #ccc;border-right: 1px solid #ccc;border-radius: 10px 10px 0 0;background: #fff;}&.isActive::after {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border-top: 1px solid #ccc;border-radius: 10px 0 0 0;background: #fff;transform: skewX(15deg);}
}
.tabs__name {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;font-size: 14px;
}
</style>