使用Element-UI的NavMenu如何隐藏自带的小箭头

更新时间：2024年07月01日 09:05:37 作者：qq_37099362

这篇文章主要介绍了使用Element-UI的NavMenu如何隐藏自带的小箭头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Element-UI的NavMenu隐藏自带的小箭头

这里使用的是水平菜单，用icon作为title

直接套用官网的模版会在icon的右边有一个小箭头，但现在需要隐藏它

直接使用下面的css代码即可

.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
	display: none; 
}

.el-submenu>.el-submenu__title .el-submenu__icon-arrow{
	display: none;
}

注意：

在<style>标签里需要把scope删掉

更改element ui中下拉菜单的小箭头的样式

添加样式

【注意添加样式style中不能添加scoped】

 .drop.el-popper[x-placement^=bottom] .popper__arrow {
		border-bottom-color: #1EBEF4 !important;
		left: 50% !important;
	}

更改下方箭头位置

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

利用Vue实现简易播放器的完整代码
这篇文章主要给大家介绍了关于如何利用Vue实现简易播放器的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
基于vue封装一个带眼睛的密码子组件
这篇文章给大家介绍了基于vue封装一个带眼睛的密码子组件的方法,文章中有详细的代码讲解,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-09-09
vue实现导航标题栏随页面滚动渐隐渐显效果
这篇文章主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
vue-echarts如何实现图表组件封装详解
由于在项目中需要对数据进行可视化处理,也就是用图表展示,所以下面这篇文章主要给大家介绍了关于vue-echarts如何实现图表组件封装的相关资料,需要的朋友可以参考下
2022-05-05
VuePress 侧边栏的具体使用
本文主要介绍了VuePress 侧边栏的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue3时间插件之Moment.js使用教程
这篇文章主要给大家介绍了关于vue3时间插件之Moment.js使用的相关资料,需要的朋友可以参考下
2023-09-09
Vue Echarts实现实时大屏动态数据显示
同大多数的前端框架一样，先读官网的使用方法。学会基本使用后，在实例中找到自己想要demo。拿过来改一改，一个echarts图表就形成，毕竟人家做就是为了方便使用，这篇文章主要介绍了Vue Echarts实现实时大屏动态数据显示
2022-10-10
Vue中建立全局引用或者全局命令的方法
这篇文章主要介绍了Vue中建立全局引用或者全局命令的方法
2017-08-08
vue props数据传递类型限制方式
这篇文章主要介绍了vue props数据传递类型限制方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
详解vue+axios给开发环境和生产环境配置不同的接口地址
这篇文章主要介绍了详解vue+axios给开发环境和生产环境配置不同的接口地址，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08