worldzhao / vue-nice-modal

Vue Nice Modal is a utility library that converts Vue.js modal components into a Promise-based API, making it easy to integrate with other UI libraries. Inspired by @ebay/nice-modal-react and vant.
https://worldzhao.github.io/vue-nice-modal/
39 stars 4 forks source link

Is possible use Container? #10

Open qzsiniong opened 9 months ago

qzsiniong commented 9 months ago

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>
worldzhao commented 8 months ago

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.

qzsiniong commented 8 months ago

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

blacklee123 commented 8 months ago

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

worldzhao commented 8 months ago

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

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

BoneTM commented 7 months ago

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

worldzhao commented 7 months ago

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 下渲染,这才是最终方案。