elementUi NavMenu 导航菜单去除下划白线

最新推荐文章于 2024-07-13 23:51:24 发布

李泽举

最新推荐文章于 2024-07-13 23:51:24 发布

阅读量8.9k

点赞数 11

分类专栏：前端踩坑合集

本文链接：https://blog.csdn.net/weixin_45895806/article/details/108258395

版权

前端踩坑合集专栏收录该内容

99 篇文章 44 订阅

订阅专栏

<el-menu
            class="el-menu-vertical-demo menu-left"
            :unique-opened="true"
            v-for="(muen,key) in menuList"
            :key="muen.menuId"
            :collapse="showCollapse"
            :default-openeds="defaultOpen"
            theme="dark"
            //2个事件，请切记，不能写:default-active="defaultActive"，computed: {
            defaultActive(){
                return this.$route.path.replace('/login');//路由替换，将当前的路由替换掉
            }
        },否则点击二级菜单的时候，别的二级菜单会展开，
            @open="handleOpen"
            @close="handleClose"
            :collapse-transition="true"
            router>
            <el-submenu
                :index="muen.menuId"
            >
                <template slot="title">
                    <i :class="'iconfont '+muen.icon"></i>
                    <span class="hidden-xs-only parentMenuName">{{muen.menuName}}</span>
                </template>
                <el-menu-item
                    v-for="item in muen.children"
                    :key="item.menuId"
                    :index="item.url"
                >
                    <span>{{item.menuName}}</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>

		//展开当前一级菜单，关闭其他的菜单
            handleOpen(key, keyPath) {
                //当前打开的sub-menu的 key 数组
                this.defaultOpen = [key];
            },
            //点击当前一级菜单关闭
            handleClose(key, keyPath) {
                console.log(key);
                console.log(keyPath);
            },


		//展开当前一级菜单，关闭其他的菜单
            handleOpen(key, keyPath) {
                //当前打开的sub-menu的 key 数组
                this.defaultOpen = [key];
            },
            //点击当前一级菜单关闭
            handleClose(key, keyPath) {
                console.log(key);
                console.log(keyPath);
            },

下面的代码放到

<style scoped>
.el-menu.el-menu--horizontal{
  border: none;
}
/* 标题颜色改变 */
>>>.el-menu--horizontal>.el-submenu .el-submenu__title{
  width: 14.3rem;
  color: white;
}
/* hover颜色改变 */
>>>.el-menu--horizontal>.el-submenu .el-submenu__title:hover{
  color: rgb(102, 97, 97);
}
/* 消除动态添加的三角 */
>>>.el-icon-arrow-down:before{
  content: none;
}
/* 下拉宽度调整 */
>>>.el-menu-item{
  width: 5rem;
}
</style>