Vue3下动态渲染自定义组件,如果自定义组件内存在mode为widthFix的image标签
将会导致Cannot read properties of null (reading 'offsetWidth')
遵循easycom定义一个empty组件,代码如下
在page中通过v-if动态控制这个组件的显示与隐藏
报错信息如下
这个错误最开始的时候是因为我用了 uni-load-more 这个组件出现的,后来我将这个组件去掉了。
然后我在开发的过程中写了这一个 empty 自定义组件,同样也出现了这个错误
针对这个错误我简单的分析了一下:
- 他们对于 page 页面来说都是子组件
- 他们都是通过 v-if 来动态展示的
- 他们内部都有mode为widthFix的image标签
分析出上述情况后,我怀疑是image标签出现的问题。
为了实验这个结果,我创建了一个新的基于Vue3的uniapp项目,写了一个自定义组件,然后岸上上述流程尝试复现,但没有复现出来。
然后我又返回到原来的项目。尝试将自定义组件内 image 标签的 mode="widthFix" 删除,就正常了。
经过反复尝试,所以问题肯定还出现在 image 的标签上,不过我的确没有复现出问题,可能是复现的过程中少了某个条件。
然后我在论坛中搜索该问题发现很多人和我一样,不过最终结果都不了了之。
另外,很奇怪的是这个报错是不是每次都会报,我测试了10次刷新页面,其中8次会报这个错误。
测试小程序是没这个问题的,暂时已知H5平台存在这个问题。
因为我们作为开发者不确定uniapp针对image底层做了什么东西,所以希望官方能解决一下这个问题,或者推断一下该问题出现的可能。
然后