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

问题描述

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

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

代码

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

使用就是正常的

// index.vue
<confirm v-model:visible="visible" />

版本

{
	"@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'。

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

问题原因

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