feat: add mountComponent utils

src/dialog/index.js

@@ -1,14 +1,11 @@
-import { createApp, nextTick } from 'vue';
+import { nextTick } from 'vue';
+import { inBrowser, mountComponent } from '../utils';
 import VanDialog from './Dialog';
-import { inBrowser } from '../utils';
 
 let instance;
 
 function initInstance() {
-  const root = document.createElement('div');
+  ({ instance } = mountComponent({
-  document.body.appendChild(root);
-
-  instance = createApp({
     data() {
       return {
         dialogProps: {
@@ -35,7 +32,7 @@ function initInstance() {
         />
       );
     },
-  }).mount(root);
+  }));
 }
 
 function Dialog(options) {

src/image-preview/index.js

@@ -1,6 +1,6 @@
-import { createApp, nextTick } from 'vue';
+import { nextTick } from 'vue';
+import { inBrowser, mountComponent } from '../utils';
 import VanImagePreview from './ImagePreview';
-import { inBrowser } from '../utils';
 
 let instance;
 
@@ -26,10 +26,7 @@ const defaultConfig = {
 };
 
 function initInstance() {
-  const root = document.createElement('div');
+  ({ instance } = mountComponent({
-  document.body.appendChild(root);
-
-  instance = createApp({
     data() {
       return {
         props: {
@@ -62,7 +59,7 @@ function initInstance() {
         />
       );
     },
-  }).mount(root);
+  }));
 }
 
 const ImagePreview = (images, startPosition = 0) => {

src/notify/index.js

@@ -1,6 +1,6 @@
-import { createApp, nextTick } from 'vue';
+import { nextTick } from 'vue';
+import { isObject, inBrowser, mountComponent } from '../utils';
 import VanNotify from './Notify';
-import { isObject, inBrowser } from '../utils';
 
 let timer;
 let instance;
@@ -10,10 +10,7 @@ function parseOptions(message) {
 }
 
 function initInstance() {
-  const root = document.createElement('div');
+  ({ instance } = mountComponent({
-  document.body.appendChild(root);
-
-  instance = createApp({
     data() {
       return {
         notifyProps: {
@@ -39,7 +36,7 @@ function initInstance() {
         />
       );
     },
-  }).mount(root);
+  }));
 }
 
 function Notify(options) {

src/toast/index.js

@@ -1,6 +1,6 @@
-import { createApp, nextTick } from 'vue';
+import { nextTick } from 'vue';
+import { isObject, inBrowser, mountComponent } from '../utils';
 import VanToast from './Toast';
-import { isObject, inBrowser } from '../utils';
 
 const defaultOptions = {
   icon: '',
@@ -52,10 +52,7 @@ function createInstance() {
   queue = queue.filter((item) => isInDocument(item.$el));
 
   if (!queue.length || multiple) {
-    const root = document.createElement('div');
+    const { instance, unmount } = mountComponent({
-    document.body.appendChild(root);
-
-    const app = createApp({
       data() {
         return {
           timer: null,
@@ -97,8 +94,7 @@ function createInstance() {
           if (multiple && inBrowser) {
             clearTimeout(this.timer);
             queue = queue.filter((item) => item !== this);
-            app.unmount();
+            unmount();
-            document.body.removeChild(root);
           }
         },
       },
@@ -115,9 +111,7 @@ function createInstance() {
       },
     });
 
-    const toast = app.mount(root);
+    queue.push(instance);
-
-    queue.push(toast);
   }
 
   return queue[queue.length - 1];

src/utils/index.ts

@@ -1,3 +1,5 @@
+import { createApp, Component } from 'vue';
+
 export { addUnit, getSizeStyle } from './format/unit';
 export { createNamespace } from './create';
 
@@ -40,3 +42,18 @@ export function pick(obj: Record<string, any>, keys: string[]) {
     return ret;
   }, {} as Record<string, any>);
 }
+
+export function mountComponent(RootComponent: Component) {
+  const app = createApp(RootComponent);
+  const root = document.createElement('div');
+
+  document.body.appendChild(root);
+
+  return {
+    instance: app.mount(root),
+    unmount() {
+      app.unmount(root);
+      document.body.removeChild(root);
+    },
+  };
+}