vue3 图形验证码组件

这是已经封装好的，用到直接复制改改数据就可以

//路径 ../components/piccode.vue
//vue3图形验证码

在需要的页面引用

import vCode from "../components/piccode.vue";

//获取子组件验证码的值
const canvasCode = ref("");
const getCode = (val) => {
  canvasCode.value = val;
};

补充一下

验证的时候可以不区分大小写

/**
 * form.code 是表单的v-model
 * canvasCOde.value是图形验证码的值
 * toUpperCase() 方法将字符串转换为大写字母。
 * toUpperCase() 方法不会更改原始字符串。
 * childCode.value.handleDraw()方法是，验证码错误时自动切换一下(也就是组件的点击事件)
 * 我是将验证码组件的字母全部写成大写的，所以需要将form.code也转为大写(小写同理)
 */
if (form.code.toUpperCase() != canvasCode.value.toUpperCase()) {
     message.error("验证码错误");
     form.code = "";
     childCode.value.handleDraw();
     return false;
   }