更改elementUI组价样式

在一次做导航栏的时候需要用到菜单组件,觉得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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值