vue3 旋转验证， 图像无法旋转，控制台报错

[landaiqing]

效果图：

控制台报错：

go-captcha-vue.js:2414 Uncaught TypeError: Cannot read properties of undefined (reading 'toString')
    at HTMLDivElement.k (go-captcha-vue.js:2414:97)

环境：
node: v20.16.0

"dependencies": {
    "@alova/adapter-axios": "^2.0.10",
    "@ant-design/icons-vue": "^7.0.1",
    "@tensorflow/tfjs": "^4.22.0",
    "@types/animejs": "^3.1.12",
    "@types/crypto-js": "^4.2.2",
    "@types/json-stringify-safe": "^5.0.3",
    "@types/node": "^22.10.0",
    "@types/nprogress": "^0.2.3",
    "@vuepic/vue-datepicker": "^10.0.0",
    "@vueuse/core": "^11.3.0",
    "@vueuse/integrations": "^11.3.0",
    "alova": "^3.2.4",
    "animejs": "^3.2.2",
    "ant-design-vue": "^4.2.6",
    "axios": "^1.7.7",
    "browser-image-compression": "^2.0.2",
    "buffer": "^6.0.3",
    "crypto-js": "^4.2.0",
    "echarts": "^5.5.1",
    "eslint": "9.15.0",
    "go-captcha-vue": "^2.0.4",
    "jsencrypt": "^3.3.2",
    "json-stringify-safe": "^5.0.1",
    "less": "^4.2.0",
    "localforage": "^1.10.0",
    "nprogress": "^0.2.0",
    "nsfwjs": "^4.2.1",
    "pinia": "^2.2.6",
    "pinia-plugin-persistedstate": "^4.1.3",
    "qrcode": "^1",
    "seedrandom": "^3.0.5",
    "swiper": "^11.1.15",
    "unplugin-auto-import": "^0.18.5",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-html": "^3.2.2",
    "vite-plugin-node-polyfills": "^0.22.0",
    "vue": "^3.5.13",
    "vue-dompurify-html": "^5.2.0",
    "vue-i18n": "^10.0.4",
    "vue-router": "^4.5.0",
    "ws": "^8.18.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.15.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "eslint-plugin-vue": "^9.31.0",
    "globals": "^15.12.0",
    "sass": "^1.81.0",
    "typescript": "^5.7.2",
    "typescript-eslint": "^8.15.0",
    "unplugin-vue-components": "^0.27.4",
    "vite": "^5.4.11",
    "vite-plugin-bundle-obfuscator": "1.3.1",
    "vite-plugin-chunk-split": "^0.5.0",
    "vue-tsc": "^2.1.10"
  }

相关代码：

<gocaptcha-rotate
            class="gocaptcha-rotate"
            v-if="showPhoneRotateCaptcha"
            :data="captchaData"
            :config="{
                  title: t('login.rotateCaptchaTitle'),
                }"
            :events="phoneLoginRotateEvent"
            ref="phoneLoginRotateRef"

        />

const captchaData = reactive({angle: 0, image: "", thumb: "", captKey: ""});
const showPhoneRotateCaptcha = ref<boolean>(false);

const phoneLoginRotateEvent = {
  confirm: (angle: number, _reset: () => void) => {
    checkPhoneLoginCaptchaDebounce(angle);
  },
  close: () => {
    showPhoneRotateCaptcha.value = false;
  },
  refresh: () => {
    refreshCaptcha();
  },
};

/**
 * 获取旋转验证码数据
 */
async function getRotateCaptcha() {
  const data: any = await getRotatedCaptchaData();
  if (data.code === 200 && data.data) {
    const {angle, image, thumb, key} = data.data;
    captchaData.angle = angle;
    captchaData.image = image;
    captchaData.thumb = thumb;
    captchaData.captKey = key;
  } else {
    message.error(t('login.systemError'));
  }
}


/**
 * 验证旋转验证码
 * @param angle
 */
async function checkPhoneLoginCaptcha(angle: number) {
  const params = {
    phone: phoneLoginForm.phone,
    angle: angle,
    key: captchaData.captKey,
  };
  const result: boolean = await sendMessageByPhone(params);
  if (result) {
    showPhoneRotateCaptcha.value = false;
    countDown();
  }
}

[wenlng]

正常情况下是不需要传递 angle 参数进去，如果要传就必须传数字类型。。。这个在下一个小版本号再加一下参数相关的校验拦截和提示

[landaiqing]

哦哦，好的，没注意到，可以正常使用了。
非常感谢！