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

效果图:

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

猜你喜欢

转载自blog.csdn.net/poluocook/article/details/126485806