javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): modal, popover, and nav are now created within application context (#22282)

Browse Source 
resolves #22079
This commit is contained in:
Liam DeBeasi
2020-10-12 15:07:49 -04:00
committed by GitHub
parent 181d322192
commit 6026c65b1a
20 changed files with 405 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/vue/src/framework-delegate.ts
View File

@ -1,7 +1,8 @@
import { createVNode, render } from 'vue';
import { h, Teleport, VNode } from 'vue';
import { addTeleportedUserComponent, removeTeleportedUserComponent } from './components/IonApp';
export const VueDelegate = () => {
const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any, classes?: string[]) => {
let Component: VNode | undefined;
const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any = {}, classes?: string[]) => {
/**
* Ionic Framework passes in modal and popover element
* refs as props, but if these are not defined
@ -10,20 +11,24 @@ export const VueDelegate = () => {
*/
delete componentProps['modal'];
delete componentProps['popover'];
const vueInstance = createVNode(component, componentProps);
const div = document.createElement('div');
classes && div.classList.add(...classes);
parentElement.appendChild(div);
render(vueInstance, div);
Component = h(
Teleport,
{ to: div },
h(component, { ...componentProps })
);
addTeleportedUserComponent(Component);
return div;
}
const removeViewFromDom = (_: HTMLElement, childElement: any) => {
render(null, childElement);
const removeViewFromDom = () => {
Component && removeTeleportedUserComponent(Component);
return Promise.resolve();
}