VUEelement导航图标显隐，点击子菜单切换父菜单图标。

最新推荐文章于 2024-05-16 07:47:36 发布

poluocook

最新推荐文章于 2024-05-16 07:47:36 发布

阅读量796

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/poluocook/article/details/126485806

版权

效果图：

submenu菜单代码

        <el-submenu  index="14"  v-if="hasMenu(['/homes'])">
          <template  slot="title">
            <i class="iconfont icon-shouye_img"><span>&#8197;首页</span></i>
            <i class="iconfont icon-shouye_smimg"><span>&#8197;首页</span></i>
          </template>
          <el-menu-item index="/homes" v-if="hasMenu(['/homes'])">首页</el-menu-item>
        </el-submenu>

CSS：

.el-menu .el-submenu .iconfont:nth-child(1) {
  display: none ;
}
.el-menu .el-submenu.is-active .iconfont:nth-child(1) {
  display: block;
}
.el-menu .el-submenu .iconfont:nth-child(2) {
  display: block ;
}
.el-menu .el-submenu.is-active .iconfont:nth-child(2) {
  display: none;
}