uni-app Button控件禁用效果

开发环境	版本号	项目创建方式
Windows	120.2212.4170.0	HBuilderX

### 示例代码：


```html
<button type="primary"  size="mini" :disabled="isDisable"  >去完成</button>  

onLoad() {  
    setTimeout(() =>{  
        this.isDisable= true  
    },100)  

}

操作步骤：

button 控件动态绑定 disabled 属性，在 onload 中将 disabled 设置为 true。
button 禁用后，按住 button 仍然有按下的样式效果。

预期结果：

按钮禁用后，按住不显示任何效果

实际结果：

按钮禁用后，按下有按下效果显示

bug描述：

button 控件动态绑定 disabled 属性，在 onload 中将 disabled 设置为 true。
button 禁用后，按住 button 仍然有按下的样式效果。
在 nvue 下，修改按钮背景颜色，按下的时候还是会显示原来的颜色。

caililin 1楼•14 天前

延迟设置

sinazl 2楼•14 天前

在调用后台接口判断是否需要禁用，肯定是会延迟设置的。

caililin 3楼•14 天前

Button 控件的按下样式不可以设置吗？

songsunli 4楼•14 天前

我反复的测试，无论是在原生vue，还是在HBuilder中，都没有问题。能不能贴出你完整的代码，或是上传能复现你问题的demo

yibo5220 5楼•14 天前

测试了一下，新建的项目就可以。放到我的项目中就不行了，代码都是一样的，搞不懂为啥会出这个情况？

sinazl 6楼•14 天前

<template> <view> <button type="primary" class="btn" size="mini" :disabled="isShow" >去完成</button> </view> </template> <script> export default { data(){ return { isShow : false } }, onLoad() { setTimeout(()=>{ this.isShow= true },100) } } </script> <style> .btn{ background-color: #f9a13d; color: #fff; border: 0; border-radius: 50rpx; } </style>

nodeper 7楼•14 天前

不知道了

wuwangju 8楼•14 天前作者

回复呆狗的一生: 发现问题了，在nvue文件下会有问题，vue文件没有问题。

sinazl 9楼•14 天前

在 Uni-App 中，你可以通过设置 disabled 属性来禁用 Button 控件。当按钮被禁用时，用户将无法点击它，并且按钮的样式通常会发生变化以表示不可用状态。

以下是一个简单的示例，展示如何在 Uni-App 中使用 Button 控件并禁用它：

<template>
  <view>
    <!-- 正常状态的按钮 -->
    <button type="primary" @click="handleClick">正常按钮</button>

    <!-- 禁用状态的按钮 -->
    <button type="primary" disabled>禁用按钮</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      uni.showToast({
        title: '按钮被点击了',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
/* 可以自定义禁用按钮的样式 */
button[disabled] {
  opacity: 0.6;
  background-color: #ccc;
}
</style>