vue中的el-button樣式怎么自定義

本文小編為大家詳細介紹“vue中的el-button樣式怎么自定義”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue中的el-button樣式怎么自定義”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

vue el-button樣式自定義

按鈕的三種狀態

/* 更改elememt-ui地固定樣式 */
/*按鈕的背景顏色樣式*/
.el-button--primary {
  background-color: rgb(247, 146, 146) !important;
}
/*鼠標經過*/
.el-button--primary:hover {
  background-color: rgb(178, 253, 144) !important;
}
/*鼠標按下*/
.el-button--primary:focus {
  background-color: rgb(159, 230, 240) !important;
}

還可以添加背景圖片

但每一個樣式后面都要添加!important即可改變按鈕的默認樣式

按鈕的其他樣式 和平時一樣添加就好了

.el-button--primary {
    background-color: #105EED !important;
    color: white !important;
    font-size: 20px;
    height: 66px;
}

用按鈕切換界面

<el-button type="info" data-id="2" plain : @click="tabChange">11111</el-button>
<el-button type="info" data-id="3" plain : @click="tabChange">2222</el-button>
<div v-show="tab==2" class="width58"></div>
<div v-show="tab==3" class="width58"></div>

tabChange(e) {
     let tabid = e.currentTarget.dataset.id
     this.tab = tabid
 },

element button自定義圖標

實現效果

如圖，我想實現二維碼的圖片可以根據不同狀態進行disabled的切換，本來是用兩個img實現的，但是img還需要設置圖片不可點擊，雖然css使用cursor:no-drop也能實現，后來突然想到button就默認支持disabled呀，我只用把這個二維碼的圖片設置為button的自定義圖標，我就可以使用button的disabled去控制是否可以點擊了

代碼實現

button的icon屬性自定義一個圖標名稱，這個自定義的圖標名稱會默認添加到button下i標簽的class上，我們只需要設置i標簽的樣式就可以了

     <el-button
       slot="reference"
       type="text"
       icon="el-icon-my-qr-code"
       :class="        //控制顯示圖標的顏色
         hasIncludeHttpText(row)
           ? 'qr-code-icon-default'
           : 'qr-code-icon-disabled'
       "
       :disabled="!hasIncludeHttpText(row)"   
     ></el-button>

設置樣式需要注意加/deep/,因為這些樣式不是在當前組件的，所以不加/deep/設置是沒有用的，當然如果不加scoped就不用加/deep/了

.qr-code-icon-default {
  /deep/ .el-icon-my-qr-code {
    background: url('~@home/assets/images/qr-code-icon.svg') no-repeat;
  }
}
.qr-code-icon-disabled {
  /deep/ .el-icon-my-qr-code {
    background: url('~@home/assets/images/disabled-qr-code-icon.svg') no-repeat;
  }
}
/deep/.el-icon-my-qr-code {
  font-size: 16px;
  background-size: cover;
}
/deep/ .el-icon-my-qr-code:before {
  content: '替';
  font-size: 16px;
  visibility: hidden;
}

讀到這里，這篇“vue中的el-button樣式怎么自定義”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。