vue-nice-modal icon indicating copy to clipboard operation
vue-nice-modal copied to clipboard

Is possible use Container?

Open qzsiniong opened this issue 1 year ago • 6 comments

Is possible use Container?

like https://modal.jenesius.com/guide/getting-started.html#connection-to-page

Not creates a new Vue application instance

App.vue looke like

<ConfigProvider :locale="getAntdLocale">
    <AppProvider>
      <RouterView />


      <!-- modals in here -->
      <ModalContainer />
    </AppProvider>
</ConfigProvider>

qzsiniong avatar Nov 29 '23 03:11 qzsiniong

Is possible use Container?

like https://modal.jenesius.com/guide/getting-started.html#connection-to-page

Not creates a new Vue application instance

App.vue looke like

<ConfigProvider :locale="getAntdLocale">
    <AppProvider>
      <RouterView />


      <!-- modals in here -->
      <ModalContainer />
    </AppProvider>
</ConfigProvider>

It is not supported at the moment. If you have a requirement to maintain context, you may need to change to other solutions(vue-modal-provider) or pass in relevant configurations.

worldzhao avatar Nov 29 '23 06:11 worldzhao

Is possible use Container? like https://modal.jenesius.com/guide/getting-started.html#connection-to-page Not creates a new Vue application instance App.vue looke like

<ConfigProvider :locale="getAntdLocale">
    <AppProvider>
      <RouterView />


      <!-- modals in here -->
      <ModalContainer />
    </AppProvider>
</ConfigProvider>

It is not supported at the moment. If you have a requirement to maintain context, you may need to change to other solutions(vue-modal-provider) or pass in relevant configurations.

what means pass in relevant configurations

qzsiniong avatar Nov 29 '23 08:11 qzsiniong

丢失上下文确实挺麻烦的,组件库(Naive UI)的自定义样式和一下api都无法正常使用,但在ant-design-vue下使用又是正常的,不知道什么原因导致的

blacklee123 avatar Dec 22 '23 08:12 blacklee123

丢失上下文确实挺麻烦的,组件库(Naive UI)的自定义样式和一下api都无法正常使用,但在ant-design-vue下使用又是正常的,不知道什么原因导致的

遇到了上下文问题确实挺麻烦的,当时就是想做一个比较简单的工具方法,实在不行只能完全参考 nice-modal-react 做一个 vue 版本了 😂

worldzhao avatar Dec 25 '23 02:12 worldzhao

https://github.com/hairyf/overlays 这里面有对应的支持 这个库基本符合我的所有需求,不知道还有没有其他更热门的包做相同的事

BoneTM avatar Jan 21 '24 06:01 BoneTM

https://github.com/hairyf/overlays 这里面有对应的支持 这个库基本符合我的所有需求,不知道还有没有其他更热门的包做相同的事

他这个方案其实我这个库也做了,直接把根 app 的 context assign 到新 app 的 context 上,从而达到上下文复用。vue2 一般挂在原型上,预期没有这个问题。

vue3 直接 assgin context 不确定有没有更多的问题(本库已支持)。

而在 vue2 场景下确实存在问题(工作中主要用的 vue2),有些库比如 vuex,并不是把 store 挂在原型上,而是根组件上,再加上 vue2 没有上下文,除了使用同一个 app (也就是 issue 提到的 container 方案,nice modal react),要么手动传入,要么再开口子,很难解决。

不是新创建 app 而是直接在 根 app 下渲染,这才是最终方案。

worldzhao avatar Jan 21 '24 10:01 worldzhao