基于 vue2 的 elementUI 的导航栏 menu 三级菜单显示位置问题

This topic created in 1084 days ago, the information mentioned may be changed or developed.

需求:

对于如下的 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>menutest</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    <div id="app">
      <el-menu class="el-menu" mode="horizontal">
        <el-submenu index="4" style="float: right; margin-right: 200px">
          <template slot="title"><i class="el-icon-menu"></i></template>
          <el-menu-item index="4-1">
            <i class="el-icon-setting"></i>
            选项 1
          </el-menu-item>
          <el-submenu index="4-2">
            <template slot="title">选项 2</template>
            <el-menu-item index="4-2-1">选项 2.1</el-menu-item>
            <el-menu-item index="4-2-2">选项 2.2</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </div>

    <script>
      new Vue({
        el: "#app",
      });
    </script>
  </body>
</html>

怎么设置 css 样式或者调整 el-menu 的样式, 让选项 2 的子菜单弹出的时候显示在上级菜单的左边(默认是右下角)? 我谷歌搜索了好久一直没找到解决方案.有没有了解帮忙提点下.

5 replies • 2023-06-06 21:07:04 +08:00

ccdjh

Jun 6, 2023

我遇到好多年轻人被框架绕晕的.就是一个 CSS 问题 .框架把前端搞的像编程一下. 还得理解了.框架才便利的

省略
</head>
<style>
.el-menu--popup-right-start{
background: red;
position: relative;
top:1px;
left: -420px;
}
</style>
<body>
省略

cityeys

Jun 6, 2023

一楼的方式没问题，还可以更简单，直接设置.el-menu--popup-right-start 的父级元素。

.el-menu--horizontal {
left: -220px
}

hm20062006ok

Jun 6, 2023

<el-submenu index="4-2" popper-class="popper-clazz">

<style>
.popper-clazz {
left: -210px !important;
}
</style>

unusebamboo

Jun 6, 2023

@ccdjh 嗯, 好的, 非常感谢. 对 elementUI 目前只会用, 了解不多, 我好好熟悉下. 再次感谢

unusebamboo

Jun 6, 2023

@cityeys 好的, 感谢