el-menu二级菜单弹出

在Ant Design Vue (简称Vue-AntD) 中，`el-menu`组件用于创建导航栏，其二级菜单通常通过嵌套`<el-menu-item>`元素并设置`index`属性来实现。当你点击一级菜单项时，如果该菜单项下有二级菜单，那么二级菜单会通过`v-popover`指令动态显示出来，就像一个下拉列表。

基本的二级菜单结构如下：

<template>
  <el-menu default-active="1" :open-names="['1']">
    <el-menu-item index="1">
      <i class="anticon anticon-setting"></i>
      <span slot="title">菜单一</span>
      <el-submenu v-popover trigger="hover" index="2">
        <template #title>二级菜单</template>
        <el-menu-item index="3">菜单二</el-menu-item>
        <el-menu-item index="4">菜单三</el-menu-item>
      </el-submenu>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      openNames: ['1'], // 当前激活的菜单层级
    };
  },
};
</script>

在这个例子中，当用户鼠标悬停在一级菜单“菜单一”上时，二级菜单会被显示出来。`trigger="hover"`表示二级菜单会在鼠标悬停时显示，也可以设置为`click`让二级菜单在点击时打开。