feat: 修改TS类型bug

src/components/ReImageVerify/src/hooks.ts

@@ -16,7 +16,9 @@ export const useImageVerify = (width = 120, height = 40) => {
 
   function getImgCode() {
     if (!domRef.value) return;
-    imgCode.value = draw(domRef.value, width, height);
+    draw(domRef.value, width, height).then(code => {
+      imgCode.value = code;
+    });
   }
 
   onMounted(() => {
@@ -42,53 +44,56 @@ function randomColor(min: number, max: number) {
   const b = randomNum(min, max);
   return `rgb(${r},${g},${b})`;
 }
-
-function draw(dom: HTMLCanvasElement, width: number, height: number) {
-  let imgCode = "";
-  let captchaCode = "";
-  const now = new Date().getTime().toString();
-  getCaptcha(now).then(res => {
-    if (res.code === "0") {
-      captchaCode = res.data;
-      useUserStoreHook().SET_VERIFYCODE(captchaCode);
-      useUserStoreHook().SET_CAPTCHATIME(now);
-      const ctx = dom.getContext("2d");
-      if (!ctx) return imgCode;
-      ctx.fillStyle = randomColor(180, 230);
-      ctx.fillRect(0, 0, width, height);
-      for (let i = 0; i < captchaCode.length; i += 1) {
-        // const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
-        const text = captchaCode[i];
-        imgCode += text;
-        const fontSize = randomNum(18, 41);
-        const deg = randomNum(-30, 30);
-        ctx.font = `${fontSize}px Simhei`;
-        ctx.textBaseline = "top";
-        ctx.fillStyle = randomColor(80, 150);
-        ctx.save();
-        ctx.translate(30 * i + 15, 15);
-        ctx.rotate((deg * Math.PI) / 180);
-        ctx.fillText(text, -15 + 5, -15);
-        ctx.restore();
-      }
-      for (let i = 0; i < 5; i += 1) {
-        ctx.beginPath();
-        ctx.moveTo(randomNum(0, width), randomNum(0, height));
-        ctx.lineTo(randomNum(0, width), randomNum(0, height));
-        ctx.strokeStyle = randomColor(180, 230);
-        ctx.closePath();
-        ctx.stroke();
-      }
-      for (let i = 0; i < 41; i += 1) {
-        ctx.beginPath();
-        ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
-        ctx.closePath();
-        ctx.fillStyle = randomColor(150, 200);
-        ctx.fill();
+function draw(
+  dom: HTMLCanvasElement,
+  width: number,
+  height: number
+): Promise<string> {
+  return new Promise(resolve => {
+    let imgCode = "";
+    const now = new Date().getTime().toString();
+    getCaptcha(now).then(res => {
+      if (res.code === "0") {
+        const captchaCode = res.data;
+        useUserStoreHook().SET_VERIFYCODE(captchaCode);
+        useUserStoreHook().SET_CAPTCHATIME(now);
+        const ctx = dom.getContext("2d");
+        if (!ctx) return resolve(imgCode);
+        ctx.fillStyle = randomColor(180, 230);
+        ctx.fillRect(0, 0, width, height);
+        for (let i = 0; i < captchaCode.length; i += 1) {
+          const text = captchaCode[i];
+          imgCode += text;
+          const fontSize = randomNum(18, 41);
+          const deg = randomNum(-30, 30);
+          ctx.font = `${fontSize}px Simhei`;
+          ctx.textBaseline = "top";
+          ctx.fillStyle = randomColor(80, 150);
+          ctx.save();
+          ctx.translate(30 * i + 15, 15);
+          ctx.rotate((deg * Math.PI) / 180);
+          ctx.fillText(text, -15 + 5, -15);
+          ctx.restore();
+        }
+        for (let i = 0; i < 5; i += 1) {
+          ctx.beginPath();
+          ctx.moveTo(randomNum(0, width), randomNum(0, height));
+          ctx.lineTo(randomNum(0, width), randomNum(0, height));
+          ctx.strokeStyle = randomColor(180, 230);
+          ctx.closePath();
+          ctx.stroke();
+        }
+        for (let i = 0; i < 41; i += 1) {
+          ctx.beginPath();
+          ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
+          ctx.closePath();
+          ctx.fillStyle = randomColor(150, 200);
+          ctx.fill();
+        }
+        resolve(imgCode);
+      } else {
+        resolve("");
       }
-      return imgCode as string;
-    } else {
-      return "";
-    }
+    });
   });
 }