props注入unmount

src/utils/mount-component.ts

@@ -13,16 +13,18 @@ export const useUnmountComponent = () => {
 };
 
 export function mountComponent(RootComponent: Component, rootProps?: Record<string, unknown> | null | undefined) {
-	const app = createApp(RootComponent, rootProps);
+	const app = createApp(RootComponent, { ...rootProps, unmount });
 	const root = document.createElement("div");
 
+	function unmount() {
+		app.unmount();
+		document.body.removeChild(root);
+	}
+
 	document.body.appendChild(root);
 
 	return {
 		instance: app.mount(root),
-		unmount() {
-			app.unmount();
-			document.body.removeChild(root);
-		},
+		unmount,
 	};
 }

src/views/myIntegral/components/settlement.ts

@@ -15,12 +15,7 @@ export type UserInfo = {
 };
 
 export const showSettlement = (props: UserInfo) => {
-	const { unmount } = mountComponent(Settlement, {
-		...props,
-		close: () => {
-			unmount();
-		},
-	});
+	const { unmount } = mountComponent(Settlement, props);
 	return {
 		unmount,
 	};

src/views/myIntegral/components/settlement.vue

@@ -14,7 +14,7 @@
 					</CellGroup>
 					<div class="submit-box">
 						<Button :loading="loading" type="primary" hairline native-type="submit" loading-text="结算中..."> 提交 </Button>
-						<Button type="default" hairline @click="props.close"> 取消 </Button>
+						<Button type="default" hairline @click="props.unmount"> 取消 </Button>
 					</div>
 				</Form>
 			</div>
@@ -34,7 +34,7 @@
 		headImage: string;
 		achievement: number;
 		achievementSettled: number;
-		close: () => void;
+		unmount: () => void;
 	}>();
 	const settlePoints = ref<number>(props.achievement);