uni-app vant4组件报错

uni-app vant4组件报错

开发环境 版本号 项目创建方式
Windows windows11 26100.3775 HBuilderX 
### 操作步骤：
```html
<van-floating-bubble icon="plus" axis="xy" magnetic="x"></van-floating-bubble>

预期结果：

显示正常

实际结果：

直接报错不显示

bug描述：

引入vant4的组件之后，直接就报错了
组件为浮动按钮：<van-floating-bubble icon="plus" axis="xy" magnetic="x"></van-floating-bubble>
报错信息如下：

22:06:51.792 [Vue warn]: Current renderer does not support string target for Teleports. (missing querySelector renderer option)  
at <VanFloatingBubbleicon="plus"axis="xy"magnetic="x">  
at <Index pageId=1 pagePath="pages/index/index" pageQuery={} ...>  
22:06:51.792 [Vue warn]: Invalid Teleport target on mount:null(object)  
at <VanFloatingBubbleicon="plus"axis="xy"magnetic="x">  
at <Index pageId=1 pagePath="pages/index/index" pageQuery={} ...>  
22:06:51.792 [Vue warn]: Unhandled error during execution of mounted hook  
at <VanFloatingBubbleicon="plus"axis="xy"magnetic="x">  
at <Index pageId=1 pagePath="pages/index/index" pageQuery={} ...>  
22:06:51.792 TypeError: Cannot read property 'innerWidth' of undefined

更多关于uni-app vant4组件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

是运行在什么端呢

更多关于uni-app vant4组件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个报错是因为Vant4的FloatingBubble组件使用了Vue的Teleport功能，而uni-app的小程序环境不支持Teleport。解决方案如下：

  1. 检查Vant版本： 确保使用的是适配uni-app的@vant/weapp版本，而不是vant4

  2. 替代方案： 对于uni-app项目，建议改用uni-ui的悬浮按钮组件：

<uni-fab :pattern="pattern" :content="content"></uni-fab>

  1. 如果必须使用Vant组件： 可以尝试手动修改vant组件源码，移除Teleport相关代码。但这种方式维护成本较高，不推荐。

  2. 检查uni-app配置： 确保manifest.json中已正确配置小程序组件：

"mp-weixin": {
  "usingComponents": {
    "van-floating-bubble": "[@vant](/user/vant)/weapp/floating-bubble/index"
  }
}
回到顶部