目錄

默認(rèn)樣式

修改默認(rèn)字體顏色：

修改鼠標(biāo)懸浮/選中字體顏色：

去掉長分割線并修改下劃線顏色

完整代碼

默認(rèn)樣式

注意事項：一定要在?<style scoped>不然修改的樣式不會覆蓋生效

修改默認(rèn)字體顏色：

::v-deep .el-tabs__item {
    color:green;
    opacity: 0.5;
}

修改鼠標(biāo)懸浮/選中字體顏色：

::v-deep .el-tabs__item.is-active {
  color: red;//選中
  opacity: 1;
}

::v-deep .el-tabs__item:hover {
  color: red;//懸浮
  cursor: pointer;
  opacity: 1;
}

去掉長分割線并修改下劃線顏色

文章來源地址http://www.zghlxwxcb.cn/news/detail-767473.html

/*去下劃線 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

/* 下劃線顏色 */
::v-deep .el-tabs__active-bar {
  background-color: red;
}

完整代碼

<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="User" name="first">User</el-tab-pane>
        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElTabs, ElTabPane } from "element-plus";

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>
<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

::v-deep .el-tabs__item {
    color: green;
    opacity: 0.5;
}

/**選中 */
::v-deep .el-tabs__item.is-active {
    color: red;
    opacity: 1;
}

/**懸浮 */
::v-deep .el-tabs__item:hover {
    color: red;
    cursor: pointer;
    opacity: 1;
}


/*去下劃線 */
::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
}

/* 下劃線顏色 */
::v-deep .el-tabs__active-bar {
    background-color: red;
}
</style>
  

到了這里，關(guān)于Element UI之el-tabs的樣式修改字體顏色、下劃線、選中/未選中的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！