更改elementUI组价样式

最新推荐文章于 2024-04-19 11:12:35 发布

原创最新推荐文章于 2024-04-19 11:12:35 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #html #css

bug 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Element UI框架中调整el-menu-item组件的宽度，适用于导航栏设计。通过在<style>中添加特定CSS样式，可以精确控制下拉菜单项的大小，包括高度、宽度及行高。

在一次做导航栏的时候需要用到菜单组件，觉得el-menu-item的宽度太大了，封装的是200px。
注意这里的el-menu-item是下拉框中的item，而不是标题！不是很想放图片，就用一级路径描述来表示导航栏的一项，用二级路径表示鼠标悬浮才出现的下拉项（表述可能不恰当，意会即可）
在当前组件的’<style_>'添加

.el-menu--horizontal {
    height: 36px;
    border-bottom: solid 0px #e6e6e6;
    .el-menu-item{
      height: 36px;
      line-height: 36px; 
      width: 30px;
    }

这种改法只适用于静态的，一打开网页就被渲染的组件，所以如果el-menu-item是作为下拉框的标题存在，也就是一级路径，那是可以改变的。但是作为二级路径时，上面的方法不起作用。

.el-menu-item{
      height: 36px !important;
      line-height: 36px !important; 
      width: 30px !important;
    }

和上一种方法不一样的不止是加了!important，因为即使上面加了这句还是一样起不了作用的。解决方法是将覆盖的代码放到index.html中。
我的index.html是这样的（虽然菜单下拉框是el-menu-item，但下拉框中的item样式是通过修改.el-menu–popup改变的！）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>data-analysis</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <style>
      .el-submenu__title{
        padding: 0px !important;
        height: 35px !important;
        line-height: 34px !important;
      }
      .el-submenu__icon-arrow{
        margin: 0px !important;
      }
      .el-menu--popup{
        min-width: 100px !important;
      }
    </style>
  </body>
</html>