♻️ showSnackbar重构

src/components/func/confirm.vue

@@ -40,12 +40,7 @@ interface ConfirmProps {
   otcancel?: boolean;
 }
 
-const defaultProp: ConfirmProps = {
-  title: "",
-  text: "",
-  mode: "confirm",
-  otcancel: false,
-};
+const defaultProp: ConfirmProps = { title: "", text: "", mode: "confirm", otcancel: false };
 
 const props = withDefaults(defineProps<ConfirmProps>(), {
   title: "",
@@ -63,25 +58,20 @@ const confirmVal = ref<boolean | string | undefined>();
 const inputVal = ref<string>("");
 const inputEl = useTemplateRef<HTMLInputElement>("inputRef");
 
-watch(show, () => {
-  if (show.value) {
-    showOuter.value = true;
-    setTimeout(() => {
-      showInner.value = true;
-    }, 100);
-  } else {
-    setTimeout(() => {
-      showInner.value = false;
-    }, 100);
-    setTimeout(() => {
-      showOuter.value = false;
-    }, 300);
-  }
-});
+watch(
+  () => show.value,
+  () => {
+    if (show.value) {
+      showOuter.value = true;
+      setTimeout(() => (showInner.value = true), 100);
+      return;
+    }
+    setTimeout(() => (showInner.value = false), 100);
+    setTimeout(() => (showOuter.value = false), 300);
+  },
+);
 
-onMounted(async () => {
-  await displayBox(props);
-});
+onMounted(async () => await displayBox(props));
 
 async function displayBox(
   params: TGApp.Component.Confirm.Params,
@@ -90,26 +80,20 @@ async function displayBox(
   data.text = params.text ?? "";
   data.mode = params.mode ?? "confirm";
   data.otcancel = params.otcancel ?? true;
-  if (params.mode === "input" && params.input) {
-    inputVal.value = params.input;
-  }
+  if (params.mode === "input" && params.input) inputVal.value = params.input;
   show.value = true;
   // 等待确认框关闭，返回关闭后的confirmVal
   return await new Promise<string | boolean | undefined>((resolve) => {
     nextTick(() => {
       if (data.mode === "input") {
         // 等待确认框打开，聚焦输入框
-        setTimeout(() => {
-          inputEl.value?.focus();
-        }, 100);
+        setTimeout(() => inputEl.value?.focus(), 100);
       }
     });
-    watch(show, () => {
-      // 等 0.5s 动画
-      setTimeout(() => {
-        resolve(confirmVal.value);
-      }, 500);
-    });
+    watch(
+      () => show.value,
+      () => setTimeout(() => resolve(confirmVal.value), 500),
+    );
   });
 }
 
@@ -138,11 +122,8 @@ function handleOuter(): void {
   }
 }
 
-defineExpose({
-  displayBox,
-});
+defineExpose({ displayBox });
 </script>
-
 <style scoped>
 .func-confirm-outer-enter-active,
 .func-confirm-outer-leave-active,

src/components/func/snackbar.ts

@@ -1,7 +1,7 @@
 /**
  * @file component func snackbar.ts
  * @description 封装 vuetify 的 snackbar 组件，通过函数调用的方式，简化 snackbar 的使用
- * @since Beta v0.3.4
+ * @since Beta v0.6.3
  */
 
 import type { ComponentInternalInstance, VNode } from "vue";
@@ -35,14 +35,47 @@ const renderBox = (props: TGApp.Component.Snackbar.Params): VNode => {
 
 let snackbarInstance: VNode;
 
-function showSnackbar(props: TGApp.Component.Snackbar.Params): void {
+function showSnackbarFull(text: string, color?: string, timeout?: number): void {
+  const params: TGApp.Component.Snackbar.Params = {
+    text: text,
+    color: color ?? "success",
+    timeout: timeout ?? 1500,
+  };
   if (snackbarInstance !== undefined) {
     const boxVue = <SnackbarInstance>snackbarInstance.component;
-    boxVue.exposeProxy.displayBox(props);
+    boxVue.exposeProxy.displayBox(params);
   } else {
-    snackbarInstance = renderBox(props);
-    showSnackbar(props);
+    snackbarInstance = renderBox(params);
+    showSnackbarFull(params.text, params.color, params.timeout);
   }
 }
 
+function showSnackbarCancel(text: string, timeout?: number): void {
+  showSnackbarFull(text, "cancel", timeout);
+}
+
+function showSnackbarError(text: string, timeout?: number): void {
+  showSnackbarFull(text, "error", timeout);
+}
+
+function showSnackbarInfo(text: string, timeout?: number): void {
+  showSnackbarFull(text, "info", timeout);
+}
+
+function showSnackbarSuccess(text: string, timeout?: number): void {
+  showSnackbarFull(text, "success", timeout);
+}
+
+function showSnackbarWarn(text: string, timeout?: number): void {
+  showSnackbarFull(text, "warn", timeout);
+}
+
+const showSnackbar = {
+  _: showSnackbarFull,
+  cancel: showSnackbarCancel,
+  error: showSnackbarError,
+  info: showSnackbarInfo,
+  success: showSnackbarSuccess,
+  warn: showSnackbarWarn,
+};
 export default showSnackbar;

src/components/func/snackbar.vue

@@ -10,37 +10,27 @@
   </transition>
 </template>
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref, toRaw } from "vue";
 
 interface SnackbarProps {
   text: string;
-  color?: string;
-  timeout?: number;
+  color: string;
+  timeout: number;
 }
 
-const props = withDefaults(defineProps<SnackbarProps>(), {
-  text: "",
-  color: "success",
-  timeout: 1500,
-});
-
+const props = defineProps<SnackbarProps>();
+const data = ref<TGApp.Component.Snackbar.Params>(toRaw(props));
 // 组件参数
-const data = reactive<TGApp.Component.Snackbar.Params>({
-  text: "",
-});
 const show = ref<boolean>(false);
-// eslint-disable-next-line no-undef
-let timer: NodeJS.Timeout;
 
-onMounted(() => {
-  displayBox(props);
-});
+// eslint-disable-next-line no-undef
+let timer: NodeJS.Timeout | undefined = undefined;
+
+onMounted(() => displayBox(props));
 
 // 根据输入的颜色转换为 hex 格式
 function transColor(color: string): string {
-  if (color.startsWith("#")) {
-    return color;
-  }
+  if (color.startsWith("#")) return color;
   switch (color) {
     case "success":
       return "#7ebd21";
@@ -58,19 +48,18 @@ function transColor(color: string): string {
 }
 
 function displayBox(params: TGApp.Component.Snackbar.Params): void {
-  data.text = params.text;
-  data.color = transColor(params.color ?? "success");
-  data.timeout = params.timeout ?? 1500;
+  data.value.text = params.text;
+  data.value.color = transColor(params.color);
+  data.value.timeout = params.timeout;
   show.value = true;
-  clearTimeout(timer);
-  timer = setTimeout(() => {
-    show.value = false;
-  }, data.timeout);
+  if (timer != undefined) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+  timer = setTimeout(() => (show.value = false), data.value.timeout);
 }
 
-defineExpose({
-  displayBox,
-});
+defineExpose({ displayBox });
 </script>
 <style lang="css" scoped>
 .func-snackbar-enter-active,