vue3 canvas 自定义验证码组件

需求：视频播放一段时间验证一下是否有人观看，弹框弹出验证码验证。

实现效果图：

实现：

1.创建一个验证码组件。新建文件verification.vue

<template>
  <canvas
    id="captchaCanvas"
    @click="generateCaptcha"
    :style="{ width, height }"
  ></canvas>
</template>

<script setup>
import { watch, onMounted, toRefs } from "vue";
const emit = defineEmits(["getValue"]);
const props = defineProps({
  // 宽度
  width: {
    type: String,
    default: "100%",
  },
  // 高度
  height: {
    type: String,
    default: "100%",
  },
  //验证码数量
  number: {
    type: Number,
    default: 4,
  }, //验证码数量
  night: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.night,
  () => {
    gener