no message

resources/assets/js/components/MicroApps/content.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="micro-app-content">
+        <micro-app
+            v-if="isOpen"
+            :name="appName"
+            :url="appUrl"
+            :keep-alive="keepAlive"
+            :data="appData"
+            @created="$emit('created', $event)"
+            @beforemount="$emit('beforemount', $event)"
+            @mounted="$emit('mounted', $event)"
+            @unmount="$emit('unmount', $event)"
+            @error="$emit('error', $event)"/>
+        <div v-if="isLoading" class="micro-app-loader">
+            <Loading/>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "MicroContent",
+    props: {
+        isOpen: {
+            type: Boolean,
+            required: true
+        },
+        appName: {
+            type: String,
+            required: true
+        },
+        appUrl: {
+            type: String,
+            required: true
+        },
+        keepAlive: {
+            type: Boolean,
+            default: true
+        },
+        isLoading: {
+            type: Boolean,
+            default: false
+        },
+        appData: {
+            type: Object,
+            required: true
+        }
+    }
+}
+</script>

resources/assets/js/components/MicroApps/index.vue

@@ -10,22 +10,18 @@
                 :beforeClose="async () => { await onBeforeClose(app.appName) }"
                 class-name="micro-app-trans"
                 fullscreen>
-                <template>
-                    <micro-app
-                        v-if="app.isOpen"
-                        :name="app.appName"
-                        :url="app.appUrl"
+                <MicroContent
+                    :is-open="app.isOpen"
+                    :app-name="app.appName"
+                    :app-url="app.appUrl"
                     :keep-alive="app.keepAlive"
-                        :data="appData(app.appName)"
+                    :is-loading="app.isLoading"
+                    :app-data="appData(app.appName)"
                     @created="created"
                     @beforemount="beforemount"
                     @mounted="mounted"
                     @unmount="unmount"
                     @error="error"/>
-                    <div v-if="app.isLoading" class="micro-app-loader">
-                        <Loading/>
-                    </div>
-                </template>
             </Modal>
             <DrawerOverlay
                 v-else
@@ -35,22 +31,18 @@
                 placement="right"
                 :beforeClose="async () => { await onBeforeClose(app.appName) }"
                 :size="1200">
-                <template>
-                    <micro-app
-                        v-if="app.isOpen"
-                        :name="app.appName"
-                        :url="app.appUrl"
+                <MicroContent
+                    :is-open="app.isOpen"
+                    :app-name="app.appName"
+                    :app-url="app.appUrl"
                     :keep-alive="app.keepAlive"
-                        :data="appData(app.appName)"
+                    :is-loading="app.isLoading"
+                    :app-data="appData(app.appName)"
                     @created="created"
                     @beforemount="beforemount"
                     @mounted="mounted"
                     @unmount="unmount"
                     @error="error"/>
-                    <div v-if="app.isLoading" class="micro-app-loader">
-                        <Loading/>
-                    </div>
-                </template>
             </DrawerOverlay>
         </template>
     </div>
@@ -95,21 +87,22 @@
 
 <script>
 import Vue from 'vue'
-import store from '../store/index'
 import {mapState} from "vuex";
-import microApp from '@micro-zoe/micro-app'
-import DialogWrapper from '../pages/manage/components/DialogWrapper.vue'
-import UserSelect from "./UserSelect.vue";
-import {languageList, languageName} from "../language";
 import {DatePicker} from 'view-design-hi';
-import DrawerOverlay from "./DrawerOverlay/index.vue";
-import emitter from "../store/events";
-import TransferDom from "../directives/transfer-dom";
+import microApp from '@micro-zoe/micro-app'
+import store from '../../store/index'
+import DialogWrapper from '../../pages/manage/components/DialogWrapper.vue'
+import UserSelect from "../UserSelect.vue";
+import {languageList, languageName} from "../../language";
+import DrawerOverlay from "../DrawerOverlay/index.vue";
+import emitter from "../../store/events";
+import TransferDom from "../../directives/transfer-dom";
+import MicroContent from "./content.vue";
 
 export default {
     name: "MicroApps",
     directives: {TransferDom},
-    components: {DrawerOverlay},
+    components: {MicroContent, DrawerOverlay},
 
     data() {
         return {

resources/assets/js/pages/manage.vue

@@ -379,7 +379,7 @@ import CheckinExport from "./manage/components/CheckinExport";
 import TaskExport from "./manage/components/TaskExport";
 import ApproveExport from "./manage/components/ApproveExport";
 import ComplaintManagement from "./manage/components/ComplaintManagement";
-import MicroApps from "../components/MicroApps.vue";
+import MicroApps from "../components/MicroApps";
 import UserSelect from "../components/UserSelect.vue";
 import ImgUpload from "../components/ImgUpload.vue";
 import ApproveDetails from "./manage/approve/details.vue";

resources/assets/js/pages/single/apps.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import MicroApps from "../../components/MicroApps.vue";
+import MicroApps from "../../components/MicroApps";
 
 export default {
     components: { MicroApps },