vue全局修改el-button样式

时间:2022-09-28 公孙元二人气:0

vue全局修改el-button样式

修改前

效果图：

代码修改

在APP.vue文件，或者某个.vue文件。

在没有scoped的style标签里面修改：

<style lang="scss">
.el-button--primary{
    color: #1686f5;
    background-color: rgb(240, 248, 255);
    border-color: rgb(148, 197, 238);
    font-size: 14px;
  &:hover {
    color: rgb(240, 248, 255);
    background-color: rgb(148, 197, 238);
    border-color: rgb(148, 197, 238);
  }
  &:active {
    color: rgb(240, 248, 255);
    background-color: rgb(148, 197, 238);
    border-color: rgb(148, 197, 238);
  }
}
<style>

样式2

代码：

.el-button--primary {
    color: #1c242c;
    background-color:#f2f6fc;
    border: none;
    font-size: 14px;
  &:hover {
  color: #2483ff;
   background-color: rgb(242,246,252);
  }
  &:active {
    color: #2483ff;
   background-color: rgb(242,246,252);
  }
}

因为本案例修改了primary类型的el-button按钮样式，如果项目中使用了饿了么的this.$confirm，因为确定按钮也是primary类型，所以需要调整primary类型按钮的样式，在App.vue文件(不带scoped的style标签里写入以下代码)：

.confirmButton-reset{
    // background: #fff !important;
    // color: #606266 !important;
    font-size: 12px;
    // border-color: #DCDFE6;;
}

在使用了confirm组件的地方，修改确定按钮按钮所使用的样式class:

 this.$confirm('确定要删除？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmButton-reset'
        })
          .then(() => {

如果想给所有的el-button设置统一样式，比如设置一样的字体大小，代码如下：

.el-button {
  margin-top:3px;
  font-size: 14px;
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

加载全部内容