vue项目怎么全局修改el-button样式

这篇文章主要介绍“vue项目怎么全局修改el-button样式”，在日常操作中，相信很多人在vue项目怎么全局修改el-button样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue项目怎么全局修改el-button样式”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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;
}

到此，关于“vue项目怎么全局修改el-button样式”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！