Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Teleport / Portal 支持? #11751

Closed
ccqgithub opened this issue May 3, 2022 · 6 comments
Closed

Teleport / Portal 支持? #11751

ccqgithub opened this issue May 3, 2022 · 6 comments
Labels
enhancement New feature or request

Comments

@ccqgithub
Copy link

这个特性解决了什么问题?

Vue 的 Teleport 和 React 的 Portal 组件需求性挺强的,对于弹窗多的小程序很必要。

本质上它们都是通过操作DOM API来实现 (比如 document.insertBefore), 现在的 Taro3 实现了类似的DOM API,应该已经可以实现这类功能了?

可以通过ref取到TaroElement, 然后传给Teleport

const teleportRef = inject('teleportRef')

<Teleport :to="teleportRef">
   ....
</>

现在尝试了下会报这个错误:

Cannot read property '__treeManager__' of undefined

这个 API 长什么样?

const teleportRef = inject('teleportRef')

<Teleport :to="teleportRef">
   ....
</>
@taro-bot2 taro-bot2 bot added the enhancement New feature or request label May 3, 2022
@odex21
Copy link

odex21 commented May 4, 2022

如果尝试更新teleport里面的dom,就会导致

Cannot read property '__treeManager__' of undefined

我隐约记得前几个月测试的时候是ok的,不知道是vue更新了还是taro更新了,现在又不行了😭

@Chen-jj
Copy link
Contributor

Chen-jj commented May 5, 2022

问题在于小程序环境要实现跨页面的全局组件,这点还是不好实现,需要再想想

@ccqgithub
Copy link
Author

问题在于小程序环境要实现跨页面的全局组件,这点还是不好实现,需要再想想

我觉得小程序没必要实现跨页面?Portal啥的只需要传当前页面的node ref就行了,毕竟小程序不会同时显示两个页面。

@LeoFeng23
Copy link

mark一下,Teleport这个希望能得到支持,目前弹窗太多了,嵌套弹窗之后各个端的fixed定位问题真的很让人头疼,如果能支持Teleport,然后把所有弹窗都变成平级应该就没这么多问题了

@LeoFeng23
Copy link

又或者是对弹窗的场景单独优化?部分支持teleport?

@AdvancedCat
Copy link
Member

AdvancedCat commented Apr 18, 2023

mark一下,Teleport这个希望能得到支持,目前弹窗太多了,嵌套弹窗之后各个端的fixed定位问题真的很让人头疼,如果能支持Teleport,然后把所有弹窗都变成平级应该就没这么多问题了

我写了个demo,使用了 vue3 teleport,但仅限于在页面内使用,是否满足你们的诉求?
@ccqgithub @LeoFeng23 @odex21

https://github.com/AdvancedCat/taro-vue-teleport

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants