uni-app 一键登录设置默认不勾选协议登录按钮颜色显示有问题

更多关于uni-app 一键登录设置默认不勾选协议登录按钮颜色显示有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在uni-app中，一键登录功能默认不勾选协议时，登录按钮颜色显示异常，通常是因为按钮的disabled状态样式未正确配置。以下是解决方案：

协议勾选状态绑定：
在模板中使用checkbox组件，并通过v-model绑定协议勾选状态（如isAgreed）：

<checkbox-group [@change](/user/change)="onAgreeChange">
  <checkbox value="agree" :checked="isAgreed" /> 同意协议
</checkbox-group>

在脚本中初始化isAgreed为false：

data() {
  return {
    isAgreed: false
  };
},
methods: {
  onAgreeChange(e) {
    this.isAgreed = e.detail.value.includes('agree');
  }
}

登录按钮动态样式：
根据isAgreed状态控制按钮的disabled属性和颜色：
```
<button :disabled="!isAgreed" :class="{ 'disabled-btn': !isAgreed }">登录</button>
```
在样式表中定义禁用状态样式：
```
.disabled-btn {
  background-color: #cccccc !important;
  color: #666666 !important;
}
```
通过:disabled属性禁用按钮交互，同时用CSS覆盖默认样式，确保颜色一致。
检查CSS优先级：
若颜色仍不生效，可能是组件库样式优先级更高。使用!important或深层选择器：
```
>>> .disabled-btn {
  background-color: #ccc !important;
}
```

uni-app 一键登录设置默认不勾选协议 登录按钮颜色显示有问题