admin管理员组

文章数量:1640603

在实际工作中，会遇到按钮点击前后样式不一致的情况，以验证码获取为例；
1.按钮点击前的样式

2.点击后的样式

具体代码如下所示
1.xml代码部分如下

<button formType='submit' disabled='{{disabled}}'  class="submit_btn"  hover-class="button-hover" >提交注册</button>

2.css代码部分如下

.submit_btn{
  width: 670rpx;
  height: 90rpx;
  color: #ffffff;
  font-size: 38rpx;
  line-height: 90rpx;
  border-radius:54rpx;
  text-align: center;
  margin-top: 50rpx;
  background-color: #2EA7E0;
}
//去除按钮的默认边框
.submit_btn::after{
  border:none;
}
/* 按钮被按下去的颜色 */
.button-hover{
  background-color: #96d3ef;
}
/* 按钮disabled的样式 */
button[disabled], wx-button[disabled]:not([type]) {
  color: #2EA7E0;
  border: none;
  background-color: #ededed;
}

3.js代码部分如下

  // 多次点击提交按钮的设置
  resetLogin: function () {
    wx.hideLoading();
    this.setData({
      disabled: "",//按钮禁用
    });
  },
  var countdown = 60;
var settimeOut;
var settime = function (that) {
  if (countdown == 0) {
    that.setData({
      vText: "重新获取",
      vCodeDisabled: ""
    })
    countdown = 60;
    return;
  } else {
    that.setData({
      vText: countdown + "s"
    })
    countdown--;
  }
  settimeOut = setTimeout(function () {
    settime(that)
  }, 1000)
}

button[disabled]用来修改属性为disabled的按钮样式

本文标签： 样式按钮disabled

版权声明：本文标题：关于按钮disabled样式的修改 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729320318a1195799.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。