设置按钮禁用时的样式

今天药忘吃喽~ 2023-06-01 14:58 10阅读 0赞

# 前言 #

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

# 效果展示 #

按钮可用时的样式：  
  ![在这里插入图片描述][20191003185529953.png]  
  按钮不可用时的样式：  
  ![在这里插入图片描述][20191003185359793.png]

# 代码实现 #

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的值来决定哪个显示，哪个不显示，给两个按钮绑定不一样的点击事件，从而实现了想要的效果。不知读者您有什么其他的想法吗？

[20191003185529953.png]: /images/20230601/3f8bfacbc5c849968f39ce0f38136809.png
[20191003185359793.png]: /images/20230601/7d6fcd3b5d354902b2a1f09f95a3eb90.png