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樣式”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！