前言
按钮有可用和不可用之分,一般按钮不可用时默认是置灰且不可点击的,但是为了配合整个项目的样式和色调,我们需要对不可用的按钮进行样式的调整。
效果展示
按钮可用时的样式:
按钮不可用时的样式:
代码实现
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的值来决定哪个显示,哪个不显示,给两个按钮绑定不一样的点击事件,从而实现了想要的效果。不知读者您有什么其他的想法吗?