Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

目录

默认样式

修改默认字体颜色:

修改鼠标悬浮/选中字体颜色:

去掉长分割线并修改下划线颜色

完整代码


默认样式

注意事项:一定要在 <style scoped>不然修改的样式不会覆盖生效

修改默认字体颜色:

::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;
}

完整代码

<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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/584271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[鹏城杯 2022]简单包含

[鹏城杯 2022]简单包含 wp 题目代码如下&#xff1a; <?php highlight_file(__FILE__); include($_POST["flag"]); //flag in /var/www/html/flag.php; 直接 POST 传参&#xff1a; flag/var/www/html/flag.php 会触发 waf 。 尝试用伪协议读取&#xff1a; …

canvas绘制红绿灯路口

无图不欢&#xff0c;先上图 使用方法&#xff08;以vue3为例&#xff09; <template><canvas class"lane" ref"laneCanvas"></canvas> </template><script setup> import { ref, onMounted } from vue import Lane from …

C实现数组奇数在前偶数在后排序

一、运行结果&#xff1b; 二、源码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//实现调整函数move_odd_even函数&#xff1b; void move_odd_even(int arr[], int sz) {//初始化变量值&#xff1b;int left 0;int right sz - 1;//循环判断和…

CSP CCF 201312-2 ISBN号码 C++满分题解

解题思路&#xff1a; 1.用一个int数组单独存储每个数字&#xff1b;用char数组存储原始标识符串&#xff0c;方便输出 2.计算后得到标识码&#xff0c;判断是否正确 #include<iostream> using namespace std;int main() {int num[15]; //存储每个位置的数char arr[15…

【高性能篇】QPS概念、RT概念

什么是QPS&#xff0c;什么是RT&#xff1f; ✔️典型解析✔️扩展知识仓✔️RT ✔️QPS✔️ QPS和TPS✔️并发用户数✔️最佳线程数 ✔️典型解析 QPS&#xff0c;指的是系统每秒能处理的请求数(Query Per Second)&#xff0c;在Web应用中我们更关注的是Web应用每秒能处理的re…

Radar System Pro - Plug Play Solution

Radar System Pro是一款功能多样且可定制的资源,旨在通过功能齐全且易于使用的雷达系统增强您的Unity项目。无论您是在开发第一人称射击游戏、策略游戏还是太空探索模拟器,我们的雷达系统都将为您提供所需的工具,以创建引人入胜且身临其境的体验。 雷达系统是一个模块化资产…

2023年华为OD机试(python)B卷-符合要求的结对方式

一、题目 题目描述&#xff1a; 用一个数组A代表程序员的工作能力&#xff0c;公司想通过结对编程的方式提高员工的能力&#xff0c;假设结对后的能力为两个员工的能力之和&#xff0c;求一共有多少种结对方式使结对后能力为N。 二、输入输出 输入描述: 5 1 2 2 2 3 4 第一行为…

Unity 贝塞尔曲线工具获取运动轨迹

Unity 贝塞尔曲线工具获取运动轨迹 一、介绍贝塞尔曲线二、Unity中贝塞尔曲线工具介绍1.创建一个空物体挂在上BezierSpline.cs脚本组件2.由上图可知刚创建出来的有两个点和两个手柄组成3.我们可修改其坐标看下效果4.这样我们就可以获得这两个点之间的指定数量的点来作为某个物体…

openGauss学习笔记-177 openGauss 数据库运维-逻辑复制-逻辑解码-逻辑解码概述

文章目录 openGauss学习笔记-177 openGauss 数据库运维-逻辑复制-逻辑解码-逻辑解码概述177.1 功能描述177.2 注意事项177.3 性能 openGauss学习笔记-177 openGauss 数据库运维-逻辑复制-逻辑解码-逻辑解码概述 177.1 功能描述 openGauss对数据复制能力的支持情况为&#xff…

资助26项!基金委公布一批原创探索项目资助结果!

根据《国家自然科学基金原创探索计划项目实施方案&#xff08;试行&#xff09;》要求&#xff0c;现将2023年度数理科学部资助的专项项目&#xff08;指南引导类原创探索计划项目&#xff09;相关信息予以公示&#xff1a; 国家自然科学基金委员会 数理科学部 2023年12月26日…

Linux 内核学习笔记: hlist 的理解

前言 最近阅读 Linux 内核时&#xff0c;遇到了 hlist&#xff0c;这个 hlist 用起来像是普通的链表&#xff0c;但是为何使用 hlist&#xff0c;hlist 是怎么工作的&#xff1f; 相关代码 hlist_add_head(&clk->clks_node, &core->clks); /*** clk_core_link_…

vue3项目使用pako库解压后端返回zip数据

文章目录 前言一、pako 介绍一些特点和功能&#xff1a;简单示例 二、vue3 实战示例1.安装后引入库安装:引用用自定义hooks 抽取共用逻辑部署小插曲 前言 外部接口返回一个图片数据是经过zip压缩的&#xff0c;前端需要把这个数据处理成可以显示的图片。大概思路&#xff1a;z…

68内网安全-域横向PTHPTKPTT哈希票据传递

今天讲PTH&PTK&PTT&#xff0c; PTH(pass the hash) #利用 lm 或 ntlm 的值进行的渗透测试 PTT(pass the ticket) #利用的票据凭证 TGT 进行的渗透测试 用的Kerberos 协议 PTK(pass the key) #利用的 ekeys aes256 进行的渗透测试 lm加密算法是2003以前的老版&…

vitis HLS中实现canny算法的IP核

一、前言 canny边缘检测主要用于提取图像的边缘&#xff0c;是最常用且有效的边缘检测算法。在AMD赛灵思提供的库函数中&#xff0c;使用xf::cv::Canny和xf::cv::EdgeTracing两个函数实现canny边缘提取。本文举例说明如何在vitis HLS 2023.1中实现canny算法。 二、xf::cv::Cann…

JUC常用并发工具类

JUC常用并发工具类 1、什么是JUC? JUC 就是 java.util.concurrent 包&#xff0c;这个包俗称 JUC&#xff0c;里面都是解决并发问题的一些东西&#xff0c;该包的位置位于 java 下 面的 rt.jar 包下面。 2、4大常用并发工具类 2.1 CountDownLatch CountDownLatch&#x…

基于Java车间工时管理系统(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

《新传奇》期刊投稿论文发表

《新传奇》杂志是经国家新闻出版总署批准、面向国内外公开发行的综合性社科期刊&#xff0c;由湖北省文联主管&#xff0c;湖北今古传奇传媒集团有限公司主办&#xff0c;湖北优秀期刊。本刊旨在坚守初心、引领创新&#xff0c;展示高水平研究成果&#xff0c;支持优秀学术人才…

如何使用 NFTScan NFT API 在 Gnosis 网络上开发 Web3 应用

Gnosis Chain 是一个兼容 EVM 的区块链&#xff0c;专注于快速且低成本的交易功能&#xff0c;采用独特的双通证模型&#xff1b;xDai 是一种用于交易、支付和手续费的稳定币&#xff0c;权益证明&#xff08;PoS&#xff09;保护将由 GNO 通过共识层 Gnosis Beacon Chain 提供…

【JVM】虚拟机的组成+字节码文件组成+类的生命周期

什么是JVM&#xff1f; JVM 本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件。 JVM的功能 1.解释和运行&#xff1a;对字节码文件中的指令实时的解释成机器码让计算机执行。 2.内存管理&#xff1a;自动为对象、方法等分配内存&#xff0c;自动…