将Element UI水平菜单从hover改为click展开

要将Element UI的水平菜单(el-menu)的展开方式从默认的hover改为click触发，你可以通过以下方法实现：

方法一：使用menu-trigger属性

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

<el-menu 
  mode="horizontal" 
  menu-trigger="click" 
  <!-- 其他属性 -->
>
  <!-- 菜单项 -->
</el-menu>

方法二：完全自定义实现

如果需要更精细的控制，可以结合default-active、collapse和手动控制菜单状态：

<template>
  <el-menu 
    mode="horizontal" 
    :default-active="activeIndex" 
    @select="handleSelect"
  >
    <el-submenu 
      v-for="item in menuItems" 
      :key="item.index" 
      :index="item.index"
      @click.native="handleSubmenuClick(item.index)"
    >
      <template slot="title">{{ item.title }}</template>
      <!-- 子菜单项 -->
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '',
      menuItems: [
        { index: '1', title: '菜单1' },
        { index: '2', title: '菜单2' }
      ]
    }
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
    handleSubmenuClick(index) {
      if (this.activeIndex === index) {
        this.activeIndex = '';
      } else {
        this.activeIndex = index;
      }
    }
  }
}
</script>

注意事项

1. 在Element UI 2.x版本中，menu-trigger属性可能在某些情况下对水平菜单不完全有效，此时可能需要使用方法二的自定义实现。

2. 如果使用自定义实现，可能需要添加额外的样式来覆盖默认的hover效果：

.el-menu--horizontal .el-submenu:hover .el-submenu__title {
  background-color: transparent !important;
  color: inherit !important;
}

3. 在移动端设备上，click触发方式通常比hover更友好。

4. 确保你的Element UI版本支持这些属性，如果不支持，考虑升级到最新版本。

希望这些方法能帮助你实现所需的功能！