From f02afd882cc3d3132ecee2d33c84ab887ba2a95a Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 31 Aug 2020 17:49:19 +0800
Subject: [PATCH] feat: add mountComponent utils

---
 src/dialog/index.js        | 11 ++++-------
 src/image-preview/index.js | 11 ++++-------
 src/notify/index.js        | 11 ++++-------
 src/toast/index.js         | 16 +++++-----------
 src/utils/index.ts         | 17 +++++++++++++++++
 5 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/dialog/index.js b/src/dialog/index.js
index 6758ae102..f89c602ca 100644
--- a/src/dialog/index.js
+++ b/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');
-  document.body.appendChild(root);
-
-  instance = createApp({
+  ({ instance } = mountComponent({
     data() {
       return {
         dialogProps: {
@@ -35,7 +32,7 @@ function initInstance() {
         />
       );
     },
-  }).mount(root);
+  }));
 }
 
 function Dialog(options) {
diff --git a/src/image-preview/index.js b/src/image-preview/index.js
index 1b8f9b3ce..db17898e6 100644
--- a/src/image-preview/index.js
+++ b/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');
-  document.body.appendChild(root);
-
-  instance = createApp({
+  ({ instance } = mountComponent({
     data() {
       return {
         props: {
@@ -62,7 +59,7 @@ function initInstance() {
         />
       );
     },
-  }).mount(root);
+  }));
 }
 
 const ImagePreview = (images, startPosition = 0) => {
diff --git a/src/notify/index.js b/src/notify/index.js
index 7a3161b2f..8a33a00ca 100644
--- a/src/notify/index.js
+++ b/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');
-  document.body.appendChild(root);
-
-  instance = createApp({
+  ({ instance } = mountComponent({
     data() {
       return {
         notifyProps: {
@@ -39,7 +36,7 @@ function initInstance() {
         />
       );
     },
-  }).mount(root);
+  }));
 }
 
 function Notify(options) {
diff --git a/src/toast/index.js b/src/toast/index.js
index 0984dd3a2..6511a5b50 100644
--- a/src/toast/index.js
+++ b/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');
-    document.body.appendChild(root);
-
-    const app = createApp({
+    const { instance, unmount } = mountComponent({
       data() {
         return {
           timer: null,
@@ -97,8 +94,7 @@ function createInstance() {
           if (multiple && inBrowser) {
             clearTimeout(this.timer);
             queue = queue.filter((item) => item !== this);
-            app.unmount();
-            document.body.removeChild(root);
+            unmount();
           }
         },
       },
@@ -115,9 +111,7 @@ function createInstance() {
       },
     });
 
-    const toast = app.mount(root);
-
-    queue.push(toast);
+    queue.push(instance);
   }
 
   return queue[queue.length - 1];
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e461e855a..06ec441d9 100644
--- a/src/utils/index.ts
+++ b/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);
+    },
+  };
+}