设置按钮禁用时的样式

前言

  按钮有可用和不可用之分，一般按钮不可用时默认是置灰且不可点击的，但是为了配合整个项目的样式和色调，我们需要对不可用的按钮进行样式的调整。

效果展示

  按钮可用时的样式：
  
  按钮不可用时的样式：
  

代码实现

HTML代码：

<van-button size="large" :disabled="btnDisabled">我要借款</van-button>

data声明变量：

btnDisabled:true

CSS样式：

button[disabled]{
    color:white !important;    
    background: #f6a3a2 !important;
}

按钮置灰仍可点击

  有这样一个需求，点击置灰的按钮的时候，弹出toast框，提示“按钮置灰，不可点击”。

<van-button v-if="!isOk" size="large" class="next" @click="next">下一步</van-button>
<van-button v-if="isOk" size="large" class="nexted" @click="nexted">下一步</van-button>

isOk:true

nexted(){
    this.$toast('按钮置灰，不可点击')
},

.next{
    width: 86%;
    margin-left: 7%;
    margin-top: 10%;
    background-color: rgb(226, 219, 219);
    border-radius: 26px 26px;
    background-color: #FA5552;    
    color: white;
}
.nexted{
    width: 86%;
    margin-left: 7%;
    margin-top: 10%;
    color:white !important;    
    background: #f6a3a2 !important;
    border-radius: 26px 26px;
}

  这样是相当于两个按钮，根据isOK的值来决定哪个显示，哪个不显示，给两个按钮绑定不一样的点击事件，从而实现了想要的效果。不知读者您有什么其他的想法吗？