将Element UI水平菜单的子菜单展开方式由hover改为click

在Element UI中，水平菜单(horizontal menu)默认是通过鼠标悬停(hover)来展开子菜单的。如果你想改为点击(click)触发展开，可以通过以下方法实现：

方法一：使用menu-trigger属性

Element UI的el-menu组件提供了一个menu-trigger属性，可以控制子菜单的触发方式：

<el-menu
  :default-active="activeIndex"
  mode="horizontal"
  menu-trigger="click"  <!-- 关键设置 -->
  @select="handleSelect"
>
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title">产品</template>
    <el-menu-item index="2-1">产品1</el-menu-item>
    <el-menu-item index="2-2">产品2</el-menu-item>
  </el-submenu>
</el-menu>

方法二：自定义CSS覆盖默认行为

如果第一种方法不生效(在某些Element UI版本中)，可以通过CSS覆盖默认行为：

/* 禁用hover效果 */
.el-menu--horizontal > .el-submenu .el-submenu__title:hover {
  background-color: transparent !important;
}

/* 强制显示点击效果 */
.el-menu--horizontal > .el-submenu:focus-within .el-submenu__title,
.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
  background-color: transparent !important;
}

方法三：结合JavaScript控制

如果需要更精细的控制，可以结合JavaScript：

<el-menu
  :default-active="activeIndex"
  mode="horizontal"
  @select="handleSelect"
  ref="horizontalMenu"
>
  <!-- 菜单项 -->
</el-menu>

<script>
export default {
  methods: {
    handleSelect(index, indexPath) {
      // 点击菜单项时的逻辑
      // 可以在这里手动控制子菜单的展开/收起
    }
  },
  mounted() {
    // 禁用hover效果
    const submenus = this.$refs.horizontalMenu.$el.querySelectorAll('.el-submenu');
    submenus.forEach(submenu => {
      submenu.onmouseenter = null;
      submenu.onmouseleave = null;
    });
  }
}
</script>

注意事项

1. 不同版本的Element UI可能有不同的行为，建议先测试menu-trigger="click"是否有效
2. 修改默认行为可能会影响用户体验，确保这种改变符合你的产品设计
3. 如果使用CSS覆盖方法，注意样式优先级问题，可能需要使用!important

以上方法应该能帮助你实现将水平菜单的子菜单展开方式从hover改为click的需求。