element-ui el-menu 折叠时 子菜单弹框点两次才会隐藏

Question

下附代码

    <el-menu
    class="el-menu-vertical"
    mode="vertical"
    menu-trigger="click"
    :router="true"
    :unique-opened="true"
    :default-active="$route.path"
    :collapse="sidebar.opened">
      <el-submenu index="299">
        <template slot="title">
          <i class="el-icon-edit-outline"></i>
          <span>xxaa</span>
        </template>
        <el-menu-item index="/page1">edit</el-menu-item>
        <el-menu-item index="/page2">选项2</el-menu-item>
      </el-submenu>
      <el-submenu :index="index + ''" v-for="(item, index) in routes" v-bind:key="index">
        <template slot="title">
          <i :class="item.ico"></i>
          <span>{{item.title}}</span>
        </template>
        <el-menu-item
            v-for="(i, ind) in item.children"
            v-bind:key="ind"
            :index="i.path">{{i.title}}
        </el-menu-item>
      </el-submenu>
    </el-menu>

---

当设备为移动设备时会出现这样的情况，其它情况正常

Answer 1

这个问题解决了吗？

Answer 2

https://segmentfault.com/a/11... 这篇文章有详细使用说明及源码，可供参考

Answer 3

menu-trigger只在mode="horizontal"的时候才起作用，把mode改一下就行了

Answer 4

今天也遇到了类似的问题，后来发现原来是chrome模拟器才有的bug，真机没有问题

Answer 5

Element UI框架的这个导航栏是通过hover触发收缩的菜单的子菜单。转到手机上没有hover这个事件，点一次相当于hover。所以才会出现第二次。恼火┭┮﹏┭┮

Answer 6

我的办法是，点击后，通过先隐藏再显示的办法半完美解决

<el-menu class="el-menu-custom" :default-active="$route.path || 'home'" :collapse="collapsed" unique-opened
      ref="menu" @select="select" v-if="show">
      <base-sub-menu v-for="menu in calMenuList" :key="menu.id" :menu="menu"></base-sub-menu>
    </el-menu>

data () {
      return {
        show: true
      }
    },
methods: {
      select (index, indexPath) {
           // 导航到对应路径（包括参数）
          this.$router.push({
            path: index
          })
          if (this.collapsed) {
            this.show = false
            Vue.nextTick(() => {
              this.show = true
            })
          }
      }
    }

Answer 7

我遇到了跟你一样的问题

  <el-menu-item
          v-for="(item, index) in secMenu.child"
          :key="index"
          :index="item.url"
        >
          <i class="fa fa-dot-circle-o leftmenu_left_pie"></i>
          <span style="margin-left:23px;">{{item.title}}</span>
        </el-menu-item>

还要加什么参数