iview代码片段 去除水平menu底部横线

最新推荐文章于 2022-08-09 15:35:06 发布
原创 最新推荐文章于 2022-08-09 15:35:06 发布 · 1.7k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过覆盖样式来移除iview菜单组件底部的边框线，适用于那些不希望菜单底部出现边框的应用场景。

此处记录日常写的小代码片段

直接使用iview的Menu在底部会出现一条border线，而我的使用场景，不需要border线。所以我就覆盖一下它原来的样式，就可以了。
在这里插入图片描述
代码：

.ivu-menu-light {
   &:after {
     height: 0px !important;
   }
 }

效果：
在这里插入图片描述

Element UI官网垂直导航栏demo去掉右侧横线
🏆 前端领域优质创作者
10-24 5963
前言 今天在 Element UI官网使用这个demo时，发现侧边有一条横线，如图： 解决方法 .el-menu { border-right:0!important; } 为了更好的覆盖成功，使用 !important 可以有效解决。 ...
iview Input组件聚焦时会出现边框（去除边框CSS）
日常笔记/总结/系列知识梳理
09-26 3992
去除边框CSS .ivu-input:focus{ outline:none; border:none; box-shadow: 0 0 0 2px transparent; }
iView单选框删除底部横线样式
T追梦人的博客
01-13 469
iView单选框删除底部横线样式
ElementUI Tabs标签页去除样式中的border 横向和竖向
小猫爪子
12-10 9606
效果图： 给tabs自定义class:deleteBorder .deleteBorder .el-tabs__nav-wrap::after{ height: 0; } .deleteBorder .el-tabs__active-bar{ background: transparent; }
关于iview二级标签刷新不定到当前页面的问题
weixin_43843679的博客
08-28 444
<Menu width="100%" ref="menu" :open-names="openNames" :active-name="activeMenu"> <Submenu :name="item.name" class="menu-item" v-for="(item, index) in menuList" :key="index" ...
iView Select组件隐藏下拉条
han1140521792的博客
10-15 1659
方法1（建议）CSS样式修改 .formClass>>>.ivu-icon-ios-arrow-down{ display: none; } 其中formClass为表单样式，需要通过表单样式找到对应的元素样式 方法2 （不建议）dom解析元素动态修改 document.getElementsByClassName('ivu-icon ivu-...
iview-admin登录完整代码附后台代码
12-12
总结来说，"iview-admin登录完整代码附后台代码"是一个综合性的项目，它涵盖了基于iview-admin的前端登录页面实现，Token认证机制，登录失败提示，用户信息获取，以及Token过期处理等功能。同时，它还提供后台代码，...
iview代码demo
01-16
姓名" prop="name" <el-input v-model="ruleForm.name" 100%"></el-input> 身份证号码" prop="id" <el-input v-model="ruleForm.id" 100%"></el-input> 电子邮件" prop="email" ...
iview搭建后台管理系统
06-01
【标题】：“iview搭建后台管理系统” 【描述】：这个项目是基于iview构建的后台管理系统，已经预先配置了Webpack并实现了接口联调，旨在提供一个便捷的开发环境。对于那些在启动或操作过程中遇到困难的开发者，...
iview实现select tree树形下拉框的示例代码
10-17
下面我们将详细探讨如何使用 IView 实现 Select Tree，并通过示例代码进行讲解。 首先，要在页面中使用 Tree 组件和 Select 组件，你需要在项目中引入 IView。这通常通过 npm 或 yarn 安装完成： ```bash npm ...
vue+iview框架实现左侧动态菜单功能的示例代码
10-15
3. **创建动态菜单组件**：使用iView的Menu组件来创建动态菜单，Menu组件需要配合MenuItem和Submenu等子组件来实现多层次菜单的显示。 4. **动态绑定active-name属性**：为了实现菜单项的高亮显示，需要将Menu组件...
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
11-20
现象： 解决方法 ： 1.修改全局css 2.只修改局部css .你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } } 补充知识：解决ElementUI的Table组件固定列，在屏幕刚好够表格显示时，会出现固定列显示不全的问题 在使用ElementUI的Table组件中的固定列时，发现当表格刚好显示全，处于临界值状态时，固定列的高度(height)会于表格高度不一致，导致固定列显示不全，出现垂直滚动条。 如上图所示，现在表格下方是未出现水平滚动条的，处
用vue-cli+iview实现的项目总结——Menu系列问题总结(悦读奇缘平台管理)
冰雪为融的博客
12-01 1412
  1、Menu 导航菜单： 问题1： 当屏幕小的时候，如果我们选择的主题是dark或者是primary，那掉下来的文字会看不到 如下图官网示例： 正常情况下： 当屏幕缩小的时候： 此时统计分析和综合设置就找不到了，其实也不是找不到了，只是掉了下来，下面是白色背景，文字也是白色的，自然就找不到了 原因：如果我们检查就会发现，这个menu菜单也是通过让li浮动实现的，所以我们...
Element UI 去除NavMenu右侧线
Trice_czj的博客
08-09 1325
element ui navmenu 修改样式
element-ui的el-menu横向菜单栏中去掉下划线
rong0914的博客
08-13 9848
找了很久原因覆盖掉样式均不行，原因是漏了重要的一句text-decoration: none; .el-menu--horizontal > .el-menu-item { border-bottom: none; text-decoration: none; }
element-ui的el-table自带横线的去除 和 iview的table边框线去除
豆奶的博客
06-01 7263
elementui和iviewui的table边框线去除
vue怎么设置白色边框_【border.css】解决vue中一像素边框问题
weixin_39640024的博客
12-21 6373
@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.border-rightleft,.border-topleft,.border-rightbottom,.border-topright,.border-bottomleft {position: re...
ivew + vue 后端传来的动态路由写法
baidu_39157075的博客
12-14 204
共两部分: 前端准备:看主文件1和主文件2; 后端准备:看主文件3 //主文件1: <template> <div class="menu_wrap"> <Menu :theme="theme2" accordion width="200px" :active-name="activeName" @on-se
使用iview的Menu组件，路由中断跳转但是路由高亮仍然改变问题
xiaomajia029的博客
07-24 2891
问题描述： 最近项目有一个需求，在表单填写相关页面，如果用户没有保存表单内容，点击导航栏将要离开页面的时候提示“信息未保存，离开页面数据将会丢失，是否确定离开？” （1）选择“确定” —— 执行路由跳转 （2）选择“取消” —— 中止跳转，仍旧留在当前页 以上为需求描述，遇到的问题是：选择取消后，侧导航栏的高亮项不正确。 简单示例如下图：点击“错误收集”，取消路由跳转，页面仍停留在“...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值