给elementUI中el-button加宽高背景颜色，大小设置，去掉默认颜色边框,园角度

1.尺寸大小设置设置宽高需要把尺寸改为最小给el-button加size=“mini” 就可以设置宽高了width height2.背景颜色( 默然样色类型 type=“primary” )(1)想要改变背景颜色 style=“background: #fb435f” 就出现背景颜色，但是本身有默认颜色边框他的primaryel-button外面div加个名 .bg_btn >>&g

文章共500字 · 阅读需要大约2分钟

一键AI生成摘要，助你高效阅读

问答

MFG_666

23065人浏览 · 2022-01-29 13:38:18

MFG_666 · 2022-01-29 13:38:18 发布

1.尺寸大小设置

设置宽高需要把尺寸改为最小给el-button加size=“mini” 就可以设置宽高了width height

2.背景颜色 ( 默然样色类型 type=“primary” )

(1) 想要改变背景颜色 style="background: #fb435f" 就出现背景颜色，但是本身有默认颜色边框他的primary
el-button外面div加个名 .bg_btn >>> .el-button--primary { border: none; } 加这个就可以去掉默认边框

(2) 加背景颜色方法:

  .bg_btn button { width: 41px; height: 18px; background: #fb435f; } 
  .bg_btnbutton:first-child { background: #0cc87e; }

3.字体大小

 .bg_btn span { position: relative; bottom: 5px; right: 5.2px; }

有默认边框

在这里插入图片描述

去掉后

在这里插入图片描述

4.去掉圆角度,加这个样式.el-button–mini这个class名在f12审查元素可查看

.bg_btn .el-button--mini {
    border-radius: inherit;
}

去掉前

在这里插入图片描述

去掉后

在这里插入图片描述

5.源码

 <div class="bg_btn">
        <el-button size="mini" type="primary" @click="ignore(item, index)"><span>忽略</span></el-button>
  		<el-button size="mini" style="background: #fb435f" type="primary" @click="buy(item, index)"><span>购买</span></el-button>
 </div>

.bg_btn {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 40%;
    width: 50%;
    height: 27px;
}
.bg_btn >>> .el-button--primary {
    border: none;
}
.bg_btn button {
    width: 41px;
    height: 18px;
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    font-weight: normal;
    color: #ffffff;
    position: relative;
    left: 20%;
    background: #fb435f;
}
.bg_btn button:first-child {
    background: #0cc87e;
}
.bg_btn span {
    position: relative;
    bottom: 5px;
    right: 5.2px;
}
.bg_btn .el-button--mini {
    border-radius: inherit;
}