欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目如何全局修改el-button樣式

 更新時間：2022年07月20日 08:59:54   作者：公孫元二  
這篇文章主要介紹了vue項目如何全局修改el-button樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue全局修改el-button樣式

修改前

效果圖：

代碼修改

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

在沒有scoped的style標(biāo)簽里面修改：

<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類型，所以需要調(diào)整primary類型按鈕的樣式，在App.vue文件(不帶scoped的style標(biāo)簽里寫入以下代碼)：

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

在使用了confirm組件的地方，修改確定按鈕按鈕所使用的樣式class:

 this.$confirm('確定要刪除？', '確認(rèn)信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmButton-reset'
        })
          .then(() => {

如果想給所有的el-button設(shè)置統(tǒng)一樣式，比如設(shè)置一樣的字體大小，代碼如下：

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

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論