Vue3实现图形验证码

本文针对在vue3中使用canvas生成图形验证码进行讲解，此文章这是一个简单的介绍，后续会优化更多丰富的功能进行封装成hooks

canvas放置验证码

canvas放置一个画布，功能需要是点击的时候重新生成code，点击调用getImgCode重新生成图形验证码的图片

<template>
  <div>
    <canvas ref="domRef" width="152" height="40" class="cursor-pointer" @click="getImgCode"></canvas>
  </div>
</template>

封成子组件

将单独的canvas封装成子组件，避免其他地方需要用到，这里传入需要生成的数字码

<image-verify v-model:code="imgCode" />

接收数字码逻辑

用props接收验证码，子组件收到验证码到hooks中进行生成图片到canvas上

同时监听验证码code的变化，父组件传入的code变化 则 使用hook的setImgCode重新生成图片

<script setup lang="ts">
import { watch } from 'vue';
import { useImageVerify } from '@/hooks';

//ts定义接口 传入的数字码
interface Props {
  code?: string;
}
//限制初始值为空字符串
const props = withDefaults(defineProps<Props>(), {
  code: ''
});


const { draw } = useImageVerify();
const domRef = ref<HTMLCanvasElement>();
const imgCode = ref(props.code);
function getImgCode() {
  if (!domRef.value) return;
  imgCode.value = draw(domRef.value, 152, 40);//绘制canvas
}
onMounted(() => {
  getImgCode();
});
</script>

几点注意事项

1.父组件的传值不能直接修改 需要重新赋值

const imgCode = ref(props.code);

2.getImgCode需要在onMounted中执行

getImgCode需要再onMounted中执行，因为在mounted阶段才能获取到domRef，否则无法挂载到页面上，如上图，最终在onMounted中执行后是正常的，看下最终的效果