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>

问题原因

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

相关推荐
帅次41 分钟前
Flutter Expanded 与 Flexible 详解
android·flutter·ios·小程序·webview
kidding7231 小时前
微信小程序怎么分包步骤(包括怎么主包跳转到分包)
前端·微信小程序·前端开发·分包·wx.navigateto·subpackages
末日的狂欢姐2 小时前
AXUI - 极致原生体验的零依赖的国产 Web UI 框架,欢迎体验和共建!
javascript·前端框架·vue·网站建设·ui设计
码起来呗3 小时前
基于Spring Boot+微信小程序的智慧农蔬微团购平台-项目分享
spring boot·后端·微信小程序
前端 贾公子3 小时前
微信小程序 == 倒计时验证码组件 (countdown-verify)
微信小程序·小程序
ii_best4 小时前
选择 iOS 按键精灵无根有根越狱辅助工具的理由
ios
墨雪遗痕4 小时前
使用 inobounce 解决 iOS 皮筋效果导致的无法下拉刷新
ios
依旧风轻4 小时前
iOS 冷启动时间监控:启动起点有哪些选择?
macos·ios·cocoa·sqi·coldstart
我爱布朗熊4 小时前
1.Vue3 - 创建Vue3工程
vue
鸿蒙布道师4 小时前
鸿蒙NEXT开发LRUCache缓存工具类(单例模式)(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei