uni-app中uni-popup组件内使用button时 button的loading和disabled属性不生效

示例代码：

<uni-popup ref="popup" type="center" :mask-click="false">  
    <view style="width: 400px;min-height: 250px; background-color: #fff;border-radius: 5px;" >  
        <view class="" style="font-size: 20px;border-bottom: 1px solid #e1e1e1;padding: 15px 10px;" >  
            <text>提示</text>  
            <uni-icons type="closeempty" @click="close('popup')" size="20"  
                style="float: right;color: #999;"></uni-icons>  
        </view>  
        <view style="padding: 30px;font-size: 20px;line-height: 30px;" >  
            {{popup.content}}  
        </view>  
        <view style="text-align: center;position: absolute;bottom: 10px;width: 380px;left: 10px;display: flex" >  
            <button @click="close('popup')" style="width: 45%;"></button>  
            <button @click="submitPopup('popup')" :hover-stay-time="500" :loading="subLoading" :disabled="subLoading" class="my-bt-bg" style="width: 45%;"></button>  
        </view>  
    </view>  
</uni-popup>

操作步骤：

直接设置loading为true都不能看到加载状态

预期结果：

直接设置loading为true可以看到加载状态

实际结果：

实际并不生效, 把样式那些去掉也还是不生效, 单独放button可生效

bug描述：

uni-popup 中使用button, button的loading和disabled不生效



| 信息类别       | 信息内容             |
|----------------|----------------------|
| 产品分类       | uniapp/App           |
| PC开发环境     | Windows              |
| PC开发环境版本 | 19045.2364           |
| HBuilderX类型  | 正式                 |
| HBuilderX版本  | 3.8.12               |
| 手机系统       | Android              |
| 手机系统版本   | Android 7.1.1        |
| 手机机型       | 其实在H5也不生效     |
| 页面类型       | vue                  |
| vue版本        | vue2                 |
| 打包方式       | 云端                 |
| 项目创建方式   | HBuilderX            |

itying888 1楼•12 天前

可以的，你试试
<template>
<view class="content">
<button @click=“openPopup()”>openPopup</button>
<uni-popup ref="popup" type="center" :mask-click="false">
<view style="width: 400px;min-height: 250px; background-color: #fff;border-radius: 5px;">
<view class="" style="font-size: 20px;border-bottom: 1px solid #e1e1e1;padding: 15px 10px;">
<text>提示</text>
<uni-icons type=“closeempty” @click=“close(‘popup’)” size=“20”
style=“float: right;color: #999;”></uni-icons>
</view>
<view style="padding: 30px;font-size: 20px;line-height: 30px;">
{{popup.content}}
</view>
<view style="text-align: center;position: absolute;bottom: 10px;width: 380px;left: 10px;display: flex">
<button @click=“close(‘popup’)” style=“width: 45%;”>取消</button>
<button @click=“submitPopup(‘popup’)” :hover-stay-time=“500” :loading=“subLoading”
:disabled=“subLoading” class=“my-bt-bg” style=“width: 45%;”>确定</button>
</view>
</view>
</uni-popup>
</view>
</template>

h691938207 2楼•12 天前

在 uni-app 中使用 uni-popup 组件时，如果发现 button 组件的 loading 和 disabled 属性不生效，可能是由于以下几个原因导致的：

1. 组件层级问题

uni-popup 是一个弹出层组件，它可能会覆盖在其他组件之上。如果 button 组件在 uni-popup 内部，确保 button 的层级没有被其他元素覆盖或遮挡。

2. 事件绑定问题

确保 button 的 click 事件正确绑定，并且没有其他事件阻止了 button 的默认行为。如果 button 的点击事件被阻止，可能会导致 loading 和 disabled 属性不生效。

3. 样式冲突

检查是否有自定义样式影响了 button 的行为。例如，某些样式可能会覆盖 button 的默认样式，导致 loading 和 disabled 属性不生效。

4. 数据绑定问题

确保 button 的 loading 和 disabled 属性正确绑定到数据。如果数据没有正确更新，可能会导致这些属性不生效。

5. uni-popup 的版本问题

确保你使用的 uni-popup 是最新版本，旧版本可能存在一些 bug 或兼容性问题。

6. 代码示例

以下是一个简单的示例，展示如何在 uni-popup 中使用 button 并确保 loading 和 disabled 属性生效：

<template>
  <view>
    <button @click="showPopup">打开弹窗</button>
    <uni-popup ref="popup" type="center">
      <view class="popup-content">
        <button :loading="isLoading" :disabled="isDisabled" @click="handleButtonClick">点击我</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      isDisabled: false
    };
  },
  methods: {
    showPopup() {
      this.$refs.popup.open();
    },
    handleButtonClick() {
      this.isLoading = true;
      this.isDisabled = true;
      // 模拟异步操作
      setTimeout(() => {
        this.isLoading = false;
        this.isDisabled = false;
      }, 2000);
    }
  }
};
</script>

<style>
.popup-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}
</style>