⚡️ emits 真好用x

src/pages/common/Config.vue

@@ -46,7 +46,7 @@
   </div>
   <div class="config-right">
     <TcAppBadge />
-    <TcUserBadge />
+    <TcUserBadge @loadOuter="loadHandle" />
   </div>
 </template>
 
@@ -412,6 +412,17 @@ function submitDevMode(): void {
     ? showSnackbar({ text: "已关闭 dev 模式!" })
     : showSnackbar({ text: "已开启 dev 模式!" });
 }
+
+// 通过子组件的事件来控制 loading
+function loadHandle(params: TGApp.Component.Loading.EmitParams): void {
+  loading.value = params.show;
+  if (params.title) {
+    loadingTitle.value = params.title;
+  }
+  if (params.text) {
+    loadingSub.value = params.text;
+  }
+}
 </script>
 <style lang="css" scoped>
 .config-box {

src/pages/common/Home.vue

@@ -12,7 +12,13 @@
       />
       <v-btn class="select-btn" @click="submitHome">确定</v-btn>
     </div>
-    <component :is="item" v-for="item in components" :key="item" @success="loadEnd(item)" />
+    <component
+      :is="item"
+      v-for="item in components"
+      :key="item"
+      @success="loadEnd(item)"
+      @loadOuter="handleLoad"
+    />
   </div>
 </template>
 
@@ -100,6 +106,18 @@ async function loadEnd(item: any): Promise<void> {
   }
 }
 
+function handleLoad(params: TGApp.Component.Loading.EmitParams): void {
+  loading.value = params.show;
+  if (params.title) {
+    loadingTitle.value = params.title;
+  }
+  if (params.text) {
+    loadingSubtitle.value = params.text;
+  } else {
+    loadingSubtitle.value = "";
+  }
+}
+
 onUnmounted(() => {
   components.value = [];
 });