BlockOx
BlockOx
  • 发布:2025-06-21 14:16
  • 更新:2025-06-21 14:22
  • 阅读:33

【报Bug】在一个自定义组件里放置多个uni-popup,会默认显示最后一个uni-popup而不是指定的uni-popup

分类:uni-app

产品分类: uniapp/小程序/抖音

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 版本 Windows 10 专业工作站版 版本号 2009 安装日期 ‎2023/‎11/‎12 OS 内部版本 19045.5965

HBuilderX类型: 正式

HBuilderX版本号: 4.66

第三方开发者工具版本号: 4.4.1

基础库版本号: 3.68.0.5

项目创建方式: HBuilderX

操作步骤:

点击支付按钮,给iPopupPay的show传true

预期结果:

显示iPopupPay支付弹窗

实际结果:

显示iPromptDialog提示弹窗

bug描述:

自定义组件iPopupPay.vue【支付弹窗】使用uni-popup实现,该组件下包含其他的弹出组件(也是使用uni-popup实现),当【支付弹窗】的show=true的时候,没有弹出支付弹窗,而是弹出最后一个弹窗iPromptDialog【无密码弹窗】,但iPromptDialog的控制标记showNoPwd一直都是false;如果删除iPromptDialog那段代码,重复一遍,依然不会弹出【支付弹窗】,而是弹出最后一个弹窗iPromptDialog【支付结果弹窗】,但showModal的值一直是false。

在iPopupPay组件里监听show,调用uni-popup的open方法显示弹窗。

         props: {  
            show: {  
                type: Boolean,  
                default: false,  
                required: true  
            },  
            order: {  
                type: Object,  
                required: true  
            },  
        },  
        data() {  
            return {  
                showPassword: false,  
                showModal: false,  
                showNoPwd: false,  
                amount: '0.00',  
                balance: '0.00',  
                payType: 'balance',  
                hasPassword: false  
            };  
        },  
    watch: {  
            show: function(prop) {  
                console.log('iPopupPay', prop)  
                if (prop) {  
                    console.log('====this.$refs.popup.open()=====', this.showNoPwd)  
                    this.$refs.popup.open()  
                    this.amount = (this.isDesposit ? this.order.depositPrice : this.order.balancePayment) ?? '0.00'  
                }  
            }  
        },

iPopupPay.vue组件

<template>  
         <view @touchmove.stop.prevent="moveHandle">  
                <uni-popup ref='popup' type='bottom' border-radius="32rpx 32rpx 0 0" background-color="#fff"  
            @maskClick="change">  
                        <view>  
                        //支付弹窗内容  
                        </view>  
             </uni-popup>  
    </view>  
    <iPopupPassword v-model:show="showPassword" @result='handlePassword'></iPopupPassword>  
    <iPromptDialog v-model:show="showModal" title='支付提示' message='该笔订单是否支付成功?' confirmText='已支付'  cancelText='未支付'  @confirm='payOk'></iPromptDialog>  
    <iPromptDialog v-model:show="showNoPwd" title='提示' message='您还未设置支付密码,是否前去设置?' confirmText='设置'   cancelText='取消' @confirm='gotoPwd'></iPromptDialog>  
</template>

在OrderList.vue里引用iPopupPay组件

<iPopupPay v-model:show='showPay' :order='order'></iPopupPay>
2025-06-21 14:16 负责人:无 分享
已邀请:
BlockOx

BlockOx (作者)

BUG原因找到了,因为我在每个uni-popup的自定义组件中,uni-popup的ref都设置为popup,当在iPopupPay里调用this.$refs.popup.open()显示弹窗时,this.$refs.popup被指向最后一个撰写的uni-popup的ref。但是这样的写法在微信小程序里是正常的,只有抖音小程序出现这样的错误。

要回复问题请先登录注册