fix(props): 更优雅的代码

src/components/t-confirm.vue

@@ -1,16 +1,16 @@
 <template>
-	<v-overlay v-model="propsConfirm.show">
-		<div class="confirm-div" v-if="propsConfirm.show">
+	<v-overlay v-model="showVal">
+		<div class="confirm-div">
 			<div class="confirm-box">
-				<div class="confirm-title">{{ propsConfirm.title }}</div>
+				<div class="confirm-title">{{ title }}</div>
 				<div class="confirm-btn-box">
 					<button class="confirm-btn" @click="setCancel">
 						<img class="btn-icon" src="../assets/icons/circle-cancel.svg" alt="cancel" />
-						<span class="btn-text">{{ propsConfirm.cancel }}</span>
+						<span class="btn-text">{{ cancel }}</span>
 					</button>
 					<button class="confirm-btn" @click="setConfirm">
 						<img class="btn-icon" src="../assets/icons/circle-check.svg" alt="confirm" />
-						<span class="btn-text">{{ propsConfirm.confirm }}</span>
+						<span class="btn-text">{{ confirm }}</span>
 					</button>
 				</div>
 			</div>
@@ -19,53 +19,55 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { defineProps, defineEmits } from "vue";
+import { defineEmits, ref } from "vue";
 
-// props
-const propsConfirm = defineProps({
-	show: {
-		type: Boolean,
-		required: true,
-		default: false,
-	},
-	title: {
-		type: String,
-		required: true,
-	},
-	cancel: {
-		type: String,
-		default: "取消",
-	},
-	confirm: {
-		type: String,
-		default: "确定",
-	},
-	value: {
-		type: Boolean,
-		required: true,
-	},
-});
+withDefaults(
+	defineProps<{
+		title: string;
+		cancel?: string;
+		confirm?: string;
+		value: boolean;
+	}>(),
+	{
+		title: "确认",
+		cancel: "取消",
+		confirm: "确定",
+		value: false,
+	}
+);
+
+const showVal = ref(false);
 
 // emits
-const emitConfirm = defineEmits(["update:value", "update:show"]);
+const emitConfirm = defineEmits(["update:value"]);
+
+// expose
+defineExpose({
+	showConfirm,
+});
 
 // methods
-async function setCancel() {
-	await emitConfirm("update:show", false);
-	await emitConfirm("update:value", false);
+function showConfirm() {
+	showVal.value = true;
 }
 
-async function setConfirm() {
-	await emitConfirm("update:show", false);
-	await emitConfirm("update:value", true);
+function setCancel() {
+	emitConfirm("update:value", false);
+	showVal.value = false;
+}
+
+function setConfirm() {
+	emitConfirm("update:value", true);
+	showVal.value = false;
 }
 </script>
 <style lang="css" scoped>
 .confirm-div {
+	position: absolute;
 	width: 40vw;
 	height: 20vh;
-	margin-top: 40vh;
-	margin-left: 30vw;
+	top: 40vh;
+	left: 30vw;
 	background: #ffffff;
 	border-radius: 10px;
 	padding: 10px;

src/components/t-loading.vue

@@ -2,41 +2,35 @@
 	<div class="loading-div">
 		<div class="loading-content">
 			<div class="loading-title">
-				{{ propsLoading.title }}
-				<v-progress-circular indeterminate color="#f4d8a8" v-show="!propsLoading.empty" />
+				{{ title }}
+				<v-progress-circular indeterminate color="#f4d8a8" v-show="!empty" />
 			</div>
-			<div class="loading-subtitle" v-show="propsLoading.subtitle">{{ propsLoading.subtitle }}</div>
-			<div class="loading-img" v-if="!propsLoading.empty">
+			<div class="loading-subtitle" v-show="subtitle">{{ subtitle }}</div>
+			<div class="loading-img" v-if="!empty">
 				<img src="/source/UI/loading.webp" alt="loading" />
 			</div>
 			<div class="loading-img" v-else>
 				<img src="/source/UI/empty.webp" alt="empty" />
 			</div>
-			<div class="loading-text" v-show="propsLoading.content">{{ propsLoading.content }}</div>
+			<div class="loading-text" v-show="content">{{ content }}</div>
 		</div>
 	</div>
 </template>
 <script lang="ts" setup>
-const propsLoading = defineProps({
-	title: {
-		type: String,
-		default: "加载中",
-	},
-	subtitle: {
-		type: String,
-	},
-	content: {
-		type: String,
-	},
-	empty: {
-		type: Boolean,
-		default: false,
-	},
-	position: {
-		type: String,
-		default: "absolute",
-	},
-});
+withDefaults(
+	defineProps<{
+		title?: string;
+		subtitle?: string;
+		content?: string;
+		empty?: boolean;
+		position?: string;
+	}>(),
+	{
+		title: "加载中",
+		empty: false,
+		position: "absolute",
+	}
+);
 </script>
 <style lang="css" scoped>
 .loading-div {

src/pages/Config.vue

@@ -96,7 +96,7 @@
 			{{ snackbarText }}
 		</v-snackbar>
 		<!-- 确认弹窗 -->
-		<t-confirm :title="confirmText" v-model:show="confirmShow" v-model:value="confirmValue" />
+		<t-confirm :title="confirmText" v-model:value="confirmValue" ref="confirmRef" />
 	</div>
 </template>
 
@@ -135,7 +135,7 @@ const snackbarText = ref("");
 const snackbarColor = ref("success");
 
 // confirm
-const confirmShow = ref(false);
+const confirmRef = ref();
 const confirmText = ref("");
 const confirmValue = ref(false);
 
@@ -162,8 +162,8 @@ async function openMergeData() {
 }
 // 删除本地数据
 async function deleteData() {
-	confirmShow.value = true;
 	confirmText.value = "确定要删除用户数据吗?";
+	confirmRef.value.showConfirm();
 	await new Promise(resolve => setTimeout(resolve, 1500));
 	const res = confirmValue.value;
 	if (res) {
@@ -188,7 +188,7 @@ async function deleteData() {
 // 删除临时数据
 async function deleteTemp() {
 	confirmText.value = "确定要删除临时数据吗?";
-	confirmShow.value = true;
+	confirmRef.value.showConfirm();
 	await new Promise(resolve => setTimeout(resolve, 1500));
 	const res = confirmValue.value;
 	if (res) {
@@ -232,7 +232,7 @@ async function submitHome() {
 // 恢复默认配置
 async function setDefaultConfig() {
 	confirmText.value = "确定要恢复默认配置吗?";
-	confirmShow.value = true;
+	confirmRef.value.showConfirm();
 	await new Promise(resolve => setTimeout(resolve, 1500));
 	const res = confirmValue.value;
 	if (res) {