The VUEelement navigation icon is displayed and hidden, click the submenu to switch the parent menu icon.

Renderings:

 submenu menu code

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

Guess you like

Origin blog.csdn.net/poluocook/article/details/126485806