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

2023-06-06 12:58:56 +08:00
unusebamboo  unusebamboo
  1. 需求:

对于如下的 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 的子菜单弹出的时候显示在上级菜单的左边(默认是右下角)? 我谷歌搜索了好久一直没找到解决方案.有没有了解帮忙提点下.

1058 次点击
所在节点   问与答  问与答
5 条回复
ccdjh
ccdjh
2023-06-06 15:11:47 +08:00
我遇到好多年轻人被框架绕晕的.就是一个 CSS 问题 .框架把前端搞的像编程一下. 还得理解了.框架才便利的

省略
</head>
<style>
.el-menu--popup-right-start{
background: red;
position: relative;
top:1px;
left: -420px;
}
</style>
<body>
省略
cityeys
cityeys
2023-06-06 15:27:19 +08:00
一楼的方式没问题,还可以更简单,直接设置.el-menu--popup-right-start 的父级元素。

.el-menu--horizontal {
left: -220px
}
hm20062006ok
hm20062006ok
2023-06-06 15:32:16 +08:00
<el-submenu index="4-2" popper-class="popper-clazz">


<style>
.popper-clazz {
left: -210px !important;
}
</style>
unusebamboo
unusebamboo
2023-06-06 21:06:50 +08:00
@ccdjh 嗯, 好的, 非常感谢. 对 elementUI 目前只会用, 了解不多, 我好好熟悉下. 再次感谢
unusebamboo
unusebamboo
2023-06-06 21:07:04 +08:00
@cityeys 好的, 感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/946244

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX