✨ 成功获取 confirm 返回

src/components/func/confirm.ts

@@ -23,13 +23,13 @@ const renderBox = (props: TGApp.Component.Confirm.Params): VNode => {
 
 let confirmInstance: any;
 
-const showConfirm = (props: TGApp.Component.Confirm.Params): void => {
+const showConfirm = async (props: TGApp.Component.Confirm.Params): Promise<string | boolean> => {
   if (confirmInstance) {
     const boxVue = confirmInstance.component;
-    boxVue.exposeProxy.displayBox(props);
+    return boxVue.exposeProxy.displayBox(props);
   } else {
     confirmInstance = renderBox(props);
-    showConfirm(props);
+    return await showConfirm(props);
   }
 };
 

src/components/func/confirm.vue

@@ -16,11 +16,11 @@
             <input v-model="inputVal" class="confirm-input-box" />
           </div>
           <div class="confirm-btn-box">
-            <button class="confirm-btn" @click="handleCancel">
+            <button class="confirm-btn" @click="handleClick(false)">
               <img class="btn-icon" src="../../assets/icons/circle-cancel.svg" alt="cancel" />
               <span class="btn-text"> 取消 </span>
             </button>
-            <button class="confirm-btn" @click="handleConfirm">
+            <button class="confirm-btn" @click="handleClick(true)">
               <img class="btn-icon" src="../../assets/icons/circle-check.svg" alt="confirm" />
               <span class="btn-text"> 确定 </span>
             </button>
@@ -33,27 +33,19 @@
 
 <script lang="ts" setup>
 // vue
-import { onMounted, reactive, ref, type UnwrapRef } from "vue";
+import { onMounted, reactive, ref, watch } from "vue";
 
 interface ConfirmProps {
   title: string;
   text?: string;
   mode: "confirm" | "input";
   otcancel?: boolean;
-  onCancel?: () => void;
-  onConfirm: (val?: boolean | string) => void;
 }
 
 const props = withDefaults(defineProps<ConfirmProps>(), {
   title: "",
   text: "",
   mode: "confirm",
-  onConfirm: () => {
-    console.log("confirm");
-  },
-  onCancel: () => {
-    console.log("cancel");
-  },
 });
 
 // 组件参数
@@ -62,57 +54,50 @@ const data = reactive({
   text: "",
   mode: "confirm",
   otcancel: false,
-  onCancel: () => {},
-  onConfirm: (value?: UnwrapRef<boolean | string>) => {},
 });
 const show = ref<boolean>(false);
 const confirmVal = ref<boolean | string>(false);
 const inputVal = ref<string>("");
 
-onMounted(() => {
-  displayBox(props);
+onMounted(async () => {
+  await displayBox(props);
 });
 
-function displayBox(props: TGApp.Component.Confirm.Params): void {
+async function displayBox(props: TGApp.Component.Confirm.Params): Promise<string | boolean> {
   data.title = props.title;
   data.text = props.text ?? "";
   data.mode = props.mode ?? "confirm";
   data.otcancel = props.otcancel ?? true;
-  data.onCancel =
-    props.onCancel ??
-    (() => {
-      console.log("cancel");
-    });
-  data.onConfirm =
-    props.onConfirm ??
-    ((param?: boolean | string) => {
-      console.log("confirm");
-    });
   show.value = true;
+  // 等待确认框关闭，返回关闭后的confirmVal
+  return await new Promise<string | boolean>((resolve) => {
+    watch(show, () => {
+      resolve(confirmVal.value);
+    });
+  });
 }
 
 // 点击确认事件
-function handleConfirm(): void {
-  if (data.mode === "input") {
-    confirmVal.value = inputVal.value;
-    inputVal.value = "";
+function handleClick(status: boolean): void {
+  let res;
+  if (!status) {
+    res = false;
   } else {
-    confirmVal.value = true;
+    if (data.mode === "input") {
+      res = inputVal.value;
+      inputVal.value = "";
+    } else {
+      res = true;
+    }
   }
-  data.onConfirm(confirmVal.value);
-  show.value = false;
-}
-
-// 点击取消事件
-function handleCancel(): void {
-  data.onCancel();
   show.value = false;
+  confirmVal.value = res;
 }
 
 // 点击外部事件
 function handleOuter(): void {
   if (data.otcancel) {
-    handleCancel();
+    handleClick(false);
   }
 }
 

src/types/Component/Confirm.d.ts

@@ -14,9 +14,6 @@ declare namespace TGApp.Component.Confirm {
    * @property {string} text 文本
    * @property {string} mode 模式 // normal: 正常（默认）,input: 输入框
    * @property {boolean} otcancel 点击外部取消 // true: 取消（默认）,false: 不取消
-   * @property {function} onConfirm 确认回调
-   * @property {function} onCancel 取消回调
-   * @property {function} onInput 输入回调
    * @return Params
    */
   export interface Params {
@@ -24,7 +21,5 @@ declare namespace TGApp.Component.Confirm {
     text?: string;
     mode?: "confirm" | "input";
     otcancel?: boolean;
-    onConfirm?: (value?: string | boolean) => void;
-    onCancel?: () => void;
   }
 }