element-ui中的el-menu如何调整标签大小，以及mode="horizontal"的横向导航栏，如何实现点击展开，点击关闭效果？

  • Z时代
  • 2024-02-20
  • 分类：IT

element-ui中的el-menu如何调整标签大小，以及mode="horizontal"的横向导航栏，如何实现点击展开，点击关闭效果？

图片中的效果是没法点击展开，点击关闭的，只有靠近了，会展开，离开了就关闭。

但是在手机端，就没法靠近展开，离开关闭，要点击才能展开。点击别的地方才能关闭。

element-ui中的el-menu如何调整标签大小，以及mode="horizontal"的横向导航栏，如何实现点击展开，点击关闭效果？

<el-menu
          ref="menu"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#1b80e9"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen()"
          @close="handleClose()"
          :ellipsis="ellipsis"
      >
        <el-menu-item index="0" ><a @click="goto('/')" target="_blank">首页</a></el-menu-item>
        <el-menu-item index="1" ><a @click="goto('/activity')" target="_blank">活动消息</a></el-menu-item>
        <el-sub-menu index="2">
          <template #title>全民健身</template>
          <el-menu-item index="2-1" @click="goto('/about')">游泳馆简介</el-menu-item>
          <el-menu-item index="2-2" @click="goto('/charge')">收费公示</el-menu-item>
          <el-menu-item index="2-3" @click="goto('/serviceStaff')">服务人员公示</el-menu-item>
          <el-menu-item index="2-4" @click="goto('/rule')">规章制度公示</el-menu-item>
<!--          <el-sub-menu index="2-4">
            <template #title>规章制度公示</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-sub-menu>-->
        </el-sub-menu>
</el-menu>
 methods: {
    handleOpen(key, keyPath) {
      console.log("open这是key==》"+key, "open这是Path-->"+keyPath);
    },
    handleClose(key, keyPath) {
      console.log("这是key==》"+key, "这是Path-->"+keyPath);
    }
  }

以上是 element-ui中的el-menu如何调整标签大小，以及mode=&quot;horizontal&quot;的横向导航栏，如何实现点击展开，点击关闭效果？ 的全部内容， 来源链接： utcz.com/p/934713.html

回到顶部