官網(wǎng)示例圖：
文章來源：http://www.zghlxwxcb.cn/news/detail-821183.html
我的需求：
文章來源地址http://www.zghlxwxcb.cn/news/detail-821183.html
通過修改css樣式實(shí)現(xiàn)：
<template>
<div class="content_box">
<el-tabs class="tabs_box" :stretch="true" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="自定義" name="third">自定義模板</el-tab-pane>
<el-tab-pane label="豎版" name="first">豎版</el-tab-pane>
<el-tab-pane label="橫版" name="second">橫版</el-tab-pane>
</el-tabs>
</div>
</template>
<script setup>
import { ref } from "vue";
let activeName = ref("first");
function handleClick(val) {
console.log(val);
}
</script>
<style lang="scss" scoped>
.content_box {
width: 400px;
height: 100vh;
background: #121216;
padding-top: 10px;
box-sizing: border-box;
}
</style>
<style lang="scss">
//去掉初始下劃線
.el-tabs__nav-wrap::after {
display: none;
}
//點(diǎn)擊到某一項時的下劃線
.el-tabs__active-bar {
width: 30px !important;
height: 3px;
border-radius: 2px;
background: #eeeeee;
left: 13%; //下劃線的初始位置
}
//每一項元素
.el-tabs__item {
height: 50px;
font-size: 18px;
color: #a1a1a1;
padding: 0;
}
// 鼠標(biāo)劃過某一項時改變字體顏色
.el-tabs__item:hover {
color: #fff;
}
// 點(diǎn)擊的某一項時改變字體顏色
.el-tabs__item.is-active {
color: #ffffff;
}
</style>
</style>
到了這里，關(guān)于改變element-ui中el-tabs組件的樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
