问题

使用element导航菜单做侧边栏菜单，用递归组件实现路由菜单渲染，遇到两个问题

折叠后文字不隐藏
折叠动画会有延迟，补流程
官网代码粘贴后发现官网的例子并没有这种情况，那就找问题根源；

问题1

度娘找到原因 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>之一，但是却嵌套了<div>,而导致收折就隐藏不了文字。
因为我们的递归组件最外层有一个<div>标签

<template>
  <div class="slid-menu-item">    //这个div影响我们文字隐藏
    <!-- 是否只有一个子项 -->
    <template v-if="hasOneShowingChild(route.children,route)">
      <el-menu-item :index="resolvePath(onlyOneChild.path)" @click="setActivePath(resolvePath(onlyOneChild.path))">
        <i class="el-icon-menu"></i>
        <span slot="title">{{onlyOneChild.meta.title}}</span>
      </el-menu-item>
    </template>
    <!-- 有二级菜单 -->
    <template v-else>
      <el-submenu :index="route.path">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">{{route.meta.title}}</span>
        </template>
        <side-menu-item
          v-for="child in route.children"
          :key="child.path"
          :route="child"
          :basePath="resolvePath(child.path)"
        ></side-menu-item>
      </el-submenu>
    </template>
  </div>
</template>

设置css样式隐藏文字

/*隐藏文字*/
  .el-menu--collapse  .el-submenu__title span{
    display: none;
  }
  /*隐藏 > */
  .el-menu--collapse  .el-submenu__title .el-submenu__icon-arrow{
    display: none;
  }

问题2：

设置侧边栏宽度时，必须将.el-menu--collapse排除，否则动画效果出现BUG

  .el-menu {
    height: 100%;
  }
  .el-menu:not(.el-menu--collapse) {
      width: 200px;
    }

版权属于：小小窝/禾下月

本文链接：https://hxyxyz.top/index.php/Web/334.html

本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！