element-ui Tabs 标签页会意外出现蓝色阴影边框的问题如何解决

已于 2022-04-27 16:56:13 修改
阅读量2.9k 收藏 7
点赞数 10
分类专栏： 前端开发 文章标签： elementui 前端 css
于 2022-04-19 13:46:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xutong_123/article/details/124268227
版权
没有检索到摘要

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-tabs示例： 

            <el-tabs v-model="activeTable" @tab-click="changeTable">
              <el-tab-pane label="tab1" name="yw">
              </el-tab-pane>
              <el-tab-pane label="tab2" name="kd">
              </el-tab-pane>
              <el-tab-pane label="tab3" name="rh">
              </el-tab-pane>
              <el-tab-pane label="tab4" name="ky">
              </el-tab-pane>
            </el-tabs>

当我切换tabs按钮的时候，出现弹窗确认，关闭弹窗后出现如下蓝色阴影边框 

 检查后发现，el-tabs__item多了如下box-shadow的样式

解决方法：

css增加如下样式

  ::v-deep .el-tabs__item {
    box-shadow: none !important;
  }

再次调试，发现原先的box-shadow 样式已经不生效了，完美！

Vue+ElementUI+Tabs实现选项卡|标签页|美化标签页面|局部替换样式|好看的标签页|选项卡
张音乐的博客
08-06 7745
因为elementUI自带的标签页实在太丑了,所以给他美化了以下,样式截图如下 1.使用 css 父级选择器来限制样式覆盖的范围, 不然会全局修改的 代码中最外层的样式 class="home" ,下面定义要覆盖的样式都要以.home为前缀. 2.把原来的边框修改成了圆角. 3.增加标签页之间的间距. 4.增加文字到标签页边框的距离 5.修改背景色, 你也可以自定义颜色 <template> <div class="home"> <div styl
Vue3 - Element Plus 标签页 Tabs 去掉底部灰色线条下划线，隐藏 el-tabs / el-tab-pane 选项卡下面一条很长的线条（完美去除 tab 标签页组件下方的灰线条）
王二红
08-11 8676
elementplus如何去掉el-tabs标签页下方很长的一条线，vue3elementplus去掉el-tabs标签页底部黑色线，element-plus标签页下划线去除，去除elementplus中tab组件中的下划线，清除vue3elementplus标签页下划线，elementplus去掉tabs选项卡底部黑色线，vue3el-tabs去掉底部的下划线，el-tab-pane下面有灰色线条怎么清除掉，vue3elementplus如何去除tabs选项卡的灰色下划线，vue3标
el-tab切换出现蓝色边框问题解决
leng0920的博客
12-28 871
el-tab切换出现蓝色边框问题解决
element UI点击tabs或者radio会出现蓝色阴影边框问题处理
ddyy2695734664的博客
02-04 3860
elmentui中在使用el-tabs的时候有时候会遇到一种情况如下： 默认带上了一个边框阴影内容，然而只要随便点击一下就能让这个内容消失掉。 探究发现，如下： 莫名其妙的加了一个 is-focus 类导致了阴影。 解决方案： 给el-tabs加上一个自定义的类，然后层层找到带上is-focus的类所引上的元素，然后给其阴影强制关闭掉 上面是别人的解决办法，我处理的时候是在公共样式里直接把样式覆盖掉了，如下： .el-tabs__item:focus.is-active.is-focus:not(:a
element-ui Tabs 标签页解决意外出现蓝色阴影边框的问题
m0_63542260的博客
05-24 549
切换tabs按钮的时候，出现蓝色阴影边框 发现会出现box-shadow。
解决点击element单选框时出现蓝色边框
yyt06的博客
04-27 1434
【代码】解决点击element单选框时出现蓝色边框。
elementui[el-tabs出现带上阴影边框的情况][解决记录]
墨水白云的博客
07-14 6893
elmentui中在使用el-tabs的时候有时候会遇到一种情况如下： 默认带上了一个边框阴影内容，然而只要随便点击一下就能让这个内容消失掉。 探究发现，如下： 莫名其妙的加了一个 is-focus 类导致了阴影。 解决方案： 给el-tabs加上一个自定义的类，然后层层找到带上is-focus的类所引上的元素，然后给其阴影强制关闭掉 ...
基于element-ui标签选项卡
08-18
本篇文章将详细探讨如何利用Element UI 的选项卡（Tab）组件来创建多种样式的标签选项卡，包括基础用法、样式定制、卡片化、位置调整以及自定义标签页和动态增减标签页。 1. **基础用法**： Element UI 的`<el-...
【区分vue2和vue3下的element UI Tabs 标签页组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
06-28 731
在 Element UI（针对 Vue 2）和 Element Plus（针对 Vue 3）中，Tabs 标签页组件通常被称为el-tabs。虽然两个版本在 API 和实现上可能有一些细微的差别，但基本概念和用法是相似的。下面我将分别介绍在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中如何使用el-tabs组件。
Element-UI自学实践（一）
最新发布
weixin_40017062的博客
08-13 454
Element-UI自学实践
element-ui Tabs标签页组件出现边框问题
jq233的博客
10-11 1439
element-ui Tabs标签页组件偶尔会出现莫名边框，打开控制台发现是因为临时多了is-focus这个类，所以修改这个类的样式即可。 解决方法： .el-tabs__item:focus.is-active.is-focus:not(:active){ box-shadow: none; }
ElementUI tab标签页的蓝色边框显示问题
weixin_43604258的博客
06-04 1310
在做项目的时候需要tab切换，使用了elementui的el-tabs组件，但是出现了一个问题 正常点击tab进行切换时，tab标签样式是非常容易修改的 但是在使用键盘进行tab切换是，就出现了一条蓝框框 官网显示如下： 我的项目中显示如下 非常不好看 在浏览其进行审查时，发现被选择的tab有如下属性 于是在代码中添加一下代码，成功将它去掉 ::v-deep .el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-
切换浏览器窗口 elementui 的tabs组件出现蓝色边框问题
xuxu_qkz的博客
07-18 2425
切换浏览器窗口 elementui 的tabs组件出现蓝色边框问题 如图： 解决办法：在commos.scss中加入属性覆盖 .theme{ .el-tabs__item:focus.is-active.is-focus:not(:active) { box-shadow: none; border-top-left-radius: 20px;...
element-ui el-tabs蓝条样式修改
dell_Luo的博客
08-08 1182
底部蓝条的长度是根据文字长度修改的，并且蓝条中间没有间隔，此时蓝条的长度就需要动态计算。element-ui el-tabs基础蓝条样式。点击切换tab时计算蓝条长度修改样式。
解决element的tabs组件出现蓝色框的问题
老电影故事的博客
06-13 809
今天写搬砖的时候，用的是饿了么的tabs组件，但是它有时会在选中那里出现一个蓝色的框 大概这个样子我说话从不拐弯抹角但是 话说回来怎么解决啊请往下看
element-ui 抽屉drawer出现蓝框bug
会一点前端、会一点Java、会一点Python
09-08 1559
最近发现，element-ui的抽屉有bug，首先是自带的title，在打开抽屉时，默认出现聚焦的蓝色框框。如果没有使用抽屉组件自带的title，那页面中第一行的第一个tab或者button，也会有类似的问题出现 针对el-tabs出现蓝框的解决办法： /deep/.el-tabs__item:focus.is-active.is-focus { box-shadow: none; } 针对自带的title出现蓝色框框的解决办法： /deep/ :focus { outline.
Elementui蓝色阴影边框相关问题的解决方案
drawlessonsfrom的博客
09-08 1321
点击Tabs标签页出现蓝色阴影边框解决方案 .el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-shadow: none !important; box-shadow: none !important; } 点击el-button-radio出现蓝色阴影边框解决方案 .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) { -webki
去掉dialog上面的蓝色线
Lin_XiJun的博客
01-03 1147
  dialog自带title divider  ，设置为透明即可   int dividerID=context.getResources().getIdentifier("android:id/titleDivider", null, null);             View divider=findViewById(dividerID);             divider....
element 的el-tabs默认选中项改变背景颜色问题
热门推荐
sober_girl的博客
01-27 1万+
element 的el-tabs默认选中项改变背景颜色问题 在前端页面中,经常style部分会添加一个scoped属性，表示此处的style只在此页面生效，如下所示。 <style scoped></style> 但是对于element组件如el-tabs，想改变选中项颜色必须把样式写在其外边，单独写一个style标签即可，如下。 <style> .el-tabs__item:hover { color: orange; background-color: or
使用 element-ui 中实现Tab点击切换内容，可以效果样式 可以实现点击切换效果
05-25
是的，使用 element-ui 中的 Tabs 组件可以很方便地实现 Tab 点击切换内容的效果，并且也可以自定义样式。 首先，在需要使用 Tabs 组件的页面中引入 Tabs 组件： ```vue <template> <el-tabs v-model="activeTab"> <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane> <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane> <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane> </el-tabs> </template> <script> import { Tabs, TabPane } from 'element-ui'; export default { components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane }, data() { return { activeTab: 'Tab 1' } } } </script> ``` 在上面的示例中，我们使用了 `el-tabs` 和 `el-tab-pane` 组件来创建 Tabs，并且使用 `v-model` 指令来绑定当前选中的 Tab。Tabs 中的每个 Tab 都由 `el-tab-pane` 组件来表示，它们的 `label` 属性用来设置 Tab 的显示名称，而标签对之间的内容则是 Tab 的内容。 可以在 `el-tabs` 组件上添加 `type` 属性来设置 Tab 的类型，比如 `card` 表示卡片式的 Tab，`border-card` 表示带边框的卡片式 Tab 等等。 ```vue <template> <el-tabs v-model="activeTab" type="card"> <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane> <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane> <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane> </el-tabs> </template> <script> import { Tabs, TabPane } from 'element-ui'; export default { components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane }, data() { return { activeTab: 'Tab 1' } } } </script> ``` 除此之外，我们也可以自定义 Tab 的样式，比如设置 Tab 的背景色、文字颜色、边框等等： ```vue <template> <el-tabs v-model="activeTab" class="custom-tab"> <el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane> <el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane> <el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane> </el-tabs> </template> <script> import { Tabs, TabPane } from 'element-ui'; export default { components: { 'el-tabs': Tabs, 'el-tab-pane': TabPane }, data() { return { activeTab: 'Tab 1' } } } </script> <style scoped> .custom-tab .el-tabs__header { background-color: #f2f2f2; border-radius: 4px; } .custom-tab .el-tabs__item.is-active { color: #fff; background-color: #409EFF; border-color: #409EFF; } .custom-tab .el-tabs__item { color: #606266; border-color: #dcdfe6; } </style> ``` 在上面的示例中，我们为 `el-tabs` 组件添加了一个名为 `custom-tab` 的 class，然后在样式表中设置了该 class 下的 Tab 的样式。这样就可以实现自定义样式的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值