解决Element-UI 2.x垂直折叠导航在触摸屏设备的问题

问题描述

  • Element-UI 2.x的垂直折叠导航，在触摸屏设备中，会在点击之后闪烁一次。

故障复现

猜测

  • 前置原因：折叠后的子导航触发方式为鼠标悬浮方式（hover），且不能更改为点击方式（click）
  • 主要原因：触摸屏设备并没有鼠标悬浮等相关事件，对于浏览器的网页来说，"鼠标"依然在那里，从而导致子导航再次显示出来。

解决方案：

<!-- ... 其他代码 -->
<el-menu-item-group>
  <span slot="title">分组一</span>
  <el-menu-item index="1-1" @click="handleSubmenuSelection($event)">选项1</el-menu-item>
  <el-menu-item index="1-2" @click="handleSubmenuSelection($event)">选项2</el-menu-item>
</el-menu-item-group>
<!-- ... 其他代码 -->
<script>
<!-- ... 其他代码 -->
  handleSubmenuSelection(menu_item) {
    console.log(menu_item);
    // 判断父组件是否为空，并且父组件的组件标签为"el-menu-item-group"
    if (menu_item.$parent && menu_item.$parent.$options._componentTag === "el-menu-item-group") {
      // 手动调用鼠标离开事件处理器
      menu_item.$parent.$parent.handleMouseleave(true);
    }
  },
<!-- ... 其他代码 -->
</script>
<!-- ... 其他代码 -->

结果

演示结果

摸🐟从未停止，努力从未开始。