taro+vue3 + nut-popup微信小程序真机不显示问题

问题描述

最近开发小程序项目,用taro + vue3+ ts 生成的模版代码。

在使用nut-ui组件库时,发现 nut-popup 组件在微信小程序模拟器中是正常显示,真机预览也是正常显示,但实际发送到体验版时,弹窗没有正常显示,只显示了黑色遮罩层,没有内容部分

代码

javascript 复制代码
// confirm/index.vue
<nut-popup v-model:visible="visible" class="confirm_popup">
	<view>内容部分...</view>
</nut-popup>

使用就是正常的

javascript 复制代码
// index.vue
<confirm v-model:visible="visible" />

版本

javascript 复制代码
{
	"@nutui/nutui-taro": "^4.3.13",
	"@tarojs/cli": "3.6.35",
	"vue": "^3.2.24"
}

排查

一开始以为层级问题,直接样式层级加到9999,也不行,所以按照dom树结构找到相关节点及样式。

吐槽一下,微信的vconsole 这方面不太好用。

问题

发现类名为 nut-popup--center 的dom元素(因为我的positio按默认设置,所以是--center)样式还是display:none。

解决

这里解决方案也很简单, 动态设置class,强制修改样式为display:'block'。

javascript 复制代码
<nut-popup v-model:visible="visible" :class="{
	confirm_popup: true,
	confirm_popup_show: visible
}">
	<view>内容部分...</view>
</nut-popup>

问题原因

自认为跟写法关系不大,为什么造成这种情况的原因,也没有具体去查,有知道的也可以告知一下。

相关推荐
权咚15 小时前
阿权的开发经验小集
git·ios·xcode
用户0915 小时前
TipKit与CloudKit同步完全指南
ios·swift
Emma歌小白1 天前
如何首次运行小程序后端
微信小程序
法的空间1 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
赣州云智科技的技术铺子1 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
Magnetic_h1 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
00后程序员张1 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
前端小超超1 天前
capacitor配置ios应用图标不同尺寸
ios·蓝桥杯·cocoa