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>

问题原因

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

相关推荐
亮子AI6 小时前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序
Q_Q5110082856 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆7 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
從南走到北7 小时前
洗车小程序系统
微信小程序·小程序
彩旗工作室7 小时前
将iOS/macOS应用上架至App Store
macos·ios·应用商店·appstore
namehu8 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
dazhong20129 小时前
微信小程序开发实战指南(三)-- Webview访问总结
微信小程序·小程序
duandashuaige10 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
江东小bug王10 小时前
深入解析 iOS 与 macOS 应用程序生命周期(完整指南)
macos·ios
盛夏绽放11 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app