vue3随机图形验证码代码

以下是使用Vue 3实现的随机图形验证码代码示例：

<template>
  <div>
    <canvas ref="canvas" width="120" height="50"></canvas>
    <input type="text" v-model="captcha" placeholder="请输入验证码" />
    <button @click="refreshCaptcha">刷新验证码</button>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";

export default {
  name: "Captcha",
  setup() {
    const captcha = ref("");
    const canvas = ref(null);

    const refreshCaptcha = () => {
      const ctx = canvas.value.getContext("2d");
      const chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let code = "";

      ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);

      // 绘制干扰线
      for (let i = 0; i < 6; i++) {
        ctx.beginPath();
        ctx.moveTo(Math.random() * canvas.value.width, Math.random() * canvas.value.height);
        ctx.lineTo(Math.random() * canvas.value.width, Math.random() * canvas.value.height);
        ctx.strokeStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        ctx.stroke();
      }

      // 绘制验证码
      for (let i = 0; i < 4; i++) {
        const char = chars[Math.floor(Math.random() * chars.length)];
        code += char;
        ctx.font = `${Math.floor(Math.random() * 10 + 30)}px Arial`;
        ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        ctx.fillText(char, i * 30 + 10, Math.random() * 20 + 30);
      }

      captcha.value = code;
    };

    onMounted(() => {
      refreshCaptcha();
    });

    return {
      captcha,
      canvas,
      refreshCaptcha,
    };
  },
};
</script>

该代码使用canvas绘制验证码，并在模板中添加了一个输入框和一个刷新按钮。每次点击刷新按钮，都会重新绘制一个新的验证码。用户需要在输入框中输入验证码，后端验证输入的验证码是否正确。