V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
unusebamboo
V2EX  ›  问与答

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

  •  
  •   unusebamboo · 312 天前 · 636 次点击
    这是一个创建于 312 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 的子菜单弹出的时候显示在上级菜单的左边(默认是右下角)? 我谷歌搜索了好久一直没找到解决方案.有没有了解帮忙提点下.

    5 条回复    2023-06-06 21:07:04 +08:00
    ccdjh
        1
    ccdjh  
       312 天前
    我遇到好多年轻人被框架绕晕的.就是一个 CSS 问题 .框架把前端搞的像编程一下. 还得理解了.框架才便利的

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

    .el-menu--horizontal {
    left: -220px
    }
    hm20062006ok
        3
    hm20062006ok  
       312 天前
    <el-submenu index="4-2" popper-class="popper-clazz">


    <style>
    .popper-clazz {
    left: -210px !important;
    }
    </style>
    unusebamboo
        4
    unusebamboo  
    OP
       312 天前
    @ccdjh 嗯, 好的, 非常感谢. 对 elementUI 目前只会用, 了解不多, 我好好熟悉下. 再次感谢
    unusebamboo
        5
    unusebamboo  
    OP
       312 天前
    @cityeys 好的, 感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1018 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 18:48 · PVG 02:48 · LAX 11:48 · JFK 14:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.