使用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;
	}

更改下方箭头位置

总结

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

您可能感兴趣的文章:

vuex实现及简略解析(小结)
这篇文章主要介绍了vuex实现及简略解析(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
vue项目中如何使用mock你知道吗
这篇文章主要为大家介绍了vue项目如何使用mock，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
利用webstrom调试Vue.js单页面程序的方法教程
这篇文章主要给大家介绍了利用webstrom调试Vue.js单页面程序的方法教程，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
2017-06-06
由浅入深讲解vue2和vue3的区别
最近发现很多要求Vue3的技术了,不得不说it技术的更新真的太快了,作为vue2老用户,我们在学习Vue3前应该了解他们的区别以及背后的原因,下面这篇文章主要给大家介绍了关于vue2和vue3区别的相关资料,需要的朋友可以参考下
2023-02-02
Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法
getCurrentInstance方法用于获取当前组件实例,仅在setup和生命周期中起作用,下面这篇文章主要给大家介绍了关于Vue3+ts+setup getCurrentInstance使用时遇到的问题以及解决办法,需要的朋友可以参考下
2022-08-08
Vue.js单向绑定和双向绑定实例分析
这篇文章主要介绍了Vue.js单向绑定和双向绑定,结合实例形式分析了vue.js单向绑定与双向绑定相关原理、实现方法及操作技巧,需要的朋友可以参考下
2018-08-08
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
这次我想给大家介绍的内存泄漏的定位方法，并非工具的使用。而是一些经验的总结，也就是我所知道的 VueJS SSR 中最容易出现内存泄漏的地方，非常具有实用价值，需要的朋友可以参考下
2018-12-12
Vue路由传参及props解耦深入分析
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue配置多页面的实现方法
本篇文章主要介绍了vue配置多页面的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
Vue滑块验证码组件anji-captcha的使用案例详解
滑块验证是一种常见的人机识别方法，这篇文章主要介绍了Vue滑块验证码组件anji-captcha的使用,本文通过实例代码图文相结合给大家介绍的非常详细，需要的朋友可以参考下
2023-05-05