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.

Sign up for GitHub

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

Jump to bottom

Can the select and dropdown components of naiveui be adapted in qiankun sandbox mode? #3281

Closed
WestonSeyler opened this issue Jul 13, 2022 · 22 comments · Fixed by #3447
Closed

Can the select and dropdown components of naiveui be adapted in qiankun sandbox mode? #3281

WestonSeyler opened this issue Jul 13, 2022 · 22 comments · Fixed by #3447
Labels
feature request New feature or request

Comments

@WestonSeyler
Copy link

This function solves the problem (这个功能解决的问题)

Adapted to the qiankun sandbox mode environment

Expected API (期望的 API)

Can a drop-down floating window be used to make a mode similar to ant-design teleport?
@github-actions github-actions bot added the feature request New feature or request label Jul 13, 2022
@Sepush
Copy link
Collaborator

Sepush commented Jul 14, 2022

what is the qiankun sandbox?

@07akioni
Copy link
Collaborator

07akioni commented Jul 17, 2022 •
edited
Loading

What do you mean like antd's teleport? As far as I know they will mount popup at body element by default.

@WestonSeyler
Copy link
Author

What do you mean like antd's teleport? As far as I know they will mount popup at body element by default.

是这样子的 当qiankun 开启严格沙盒模式 下拉菜单、select 这种下拉悬浮就失效了，如果不开启沙盒模式 一切都是正常的，但是我看antd有通过自定义元素挂载来解决该问题 是否能做优化呢？
image

2022-07-18.10.06.32.mov

@WestonSeyler
Copy link
Author

但是使用teleport 功能没有问题 但是样式好像消失了 都是原生的默认样式

@07akioni
Copy link
Collaborator

拉菜单、select 这种下拉悬浮就失效了，如果不开启沙盒模式 一切都是正常的，但是我看antd有通过自定义元素挂载来解决该问题 是否能做优化呢？

这个得具体分析了，为什么样式没有正确的挂载，是不是 qiankun 拦截了到 head 动态挂载的样式。

我最近应该不太有空有时间研究某个具体沙盒的解决方案，如果你能帮忙解释一下问题具体出在哪的话可能会对 naive 实现兼容这个模式的功能有帮助。

@WestonSeyler
Copy link
Author

拉菜单、select 这种下拉悬浮就失效了，如果不开启沙盒模式 一切都是正常的，但是我看antd有通过自定义元素挂载来解决该问题 是否能做优化呢？

这个得具体分析了，为什么样式没有正确的挂载，是不是 qiankun 拦截了到 head 动态挂载的样式。

我最近应该不太有空有时间研究某个具体沙盒的解决方案，如果你能帮忙解释一下问题具体出在哪的话可能会对 naive 实现兼容这个模式的功能有帮助。

DOM 插入到子应用的盒子中，我看只有ANTD有这个getPopupContainer 弹出框（Select, Tooltip, Menu、Dropdown 等等）渲染父节点，默认渲染到 body 上。 function(triggerNode) () => document.body有这个，他对这一块好像都做了类似的兼容 就是为了适配qiankun的么 希望作者看一下哈 看代码的可行度怎么样

@07akioni
Copy link
Collaborator

07akioni commented Jul 19, 2022 •
edited
Loading

这感觉可能有很多暗坑，antd 能跑的是怎么配置 getPopupContainer 的？

@WestonSeyler
Copy link
Author

image

image

image

image

现在的需求是希望能在内部给个参数或者是回调函数去把这个浮层挂在当前元素的节点上 系统默认是挂载载body shadowDom开启的话 是拿不到dom元素的 所以无法改变挂载位置 目前遇到的是这个问题

@WestonSeyler
Copy link
Author

这感觉可能有很多暗坑，antd 能跑的是怎么配置 getPopupContainer 的？

image

image

他代码里是默认没有这个回掉函数 是默认挂载在body上 如果传入这个函数 就挂载在所在组件的节点 就不在body上了，这个domNode就是取决挂载body还是其他节点的问题
image

至于浮层好像没有什么奇特的地方 最终就是个teleport插槽而已 希望能抽空看一下哈

@WestonSeyler
Copy link
Author

WestonSeyler commented Jul 20, 2022 •
edited
Loading

或者作者在naive-ui中能有什么好的解决方式，避免比较大的改动，浮层应该都是通用组件 只不过传递不同的插槽内容吧 实现一个 其他的select、Dropdown 应该都能得到解决

@07akioni
Copy link
Collaborator

能在内部给个参数或者是回调函数去把这个浮层挂在当前元素的节点上 系统默认是挂载载body shadowDom开启的话 是拿不到dom元素的 所以无法改变挂载位置 目前遇到的是这个问题

单纯说控制浮层卸载位置是可以提供一个属性的

@07akioni
Copy link
Collaborator

能给个最小复现吗？我看看搞完能不能 work

@WestonSeyler
Copy link
Author

能给个最小复现吗？我看看搞完能不能 work

2022-07-22.16.26.25.mov

我大概调试了下 问题大概
image
mergedShowRe.value 一直为false 如果不是shadowDom模式一切正常的 但是开启shaDowDom模式，明明这一次执行openMenu,mergedShowRe的值不是已经变成true了吗，然后在点输入框收起,还是false

@WestonSeyler
Copy link
Author

2022-07-22.16.52.26.mov
2022-07-22.16.36.46.mov

可以看下这两段视频，一个是开启了沙盒 一个是没开启的

@07akioni
Copy link
Collaborator

07akioni commented Jul 24, 2022 •
edited
Loading

代码仓库复现能整一个？小点的，有一个组件就行

@WestonSeyler
Copy link
Author

WestonSeyler commented Jul 25, 2022 •
edited
Loading

好的
https://github.com/wawa0584/qiankun-vite-test
跑main和vue3两个就行 默认开启了沙箱模式
可以看看这几个组件 都是碰到的问题 作者可以看看哈

image

@WestonSeyler
Copy link
Author

好的 https://github.com/wawa0584/qiankun-vite-test 跑main和vue3两个就行 默认开启了沙箱模式

image

十分感谢作者能在百忙中抽出时间来！！！

@07akioni
Copy link
Collaborator

我周末看看

@WestonSeyler
Copy link
Author

我周末看看

谢谢了哈

@07akioni
Copy link
Collaborator

image

我看关键问题是鼠标移动的 target 是子 app，不是里面的元素，不知道这玩意有没有解法

@07akioni
Copy link
Collaborator

我倒是找到问题的解法了，不过看起来要改的地方不少

@07akioni
Copy link
Collaborator

用 e.composedPath()[0] 取代 e.target 可以解决这些问题

07akioni added a commit to 07akioni/naive-ui-fork that referenced this issue Aug 7, 2022
@07akioni
fix: some components works abnormally in open mode shadow DOM, closes t…
e800b0e 
…usen-ai#3281
@07akioni 07akioni mentioned this issue Aug 7, 2022
Merged
XieZongChen pushed a commit that referenced this issue Aug 7, 2022
@07akioni
fix: some components works abnormally in open mode shadow DOM, closes #…
8c44c3d 
…3281 (#3447)

* fix: event target

* chore: update evtd

* 2.32.2-beta.0

* chore: fix type

* fix: some components works abnormally in open mode shadow DOM, closes #3281
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: some components works abnormally in open mode shadow DOM, closes #3281 07akioni/naive-ui-fork
3 participants
@07akioni @Sepush @WestonSeyler