这是已经封装好的,用到直接复制改改数据就可以
//路径 ../components/piccode.vue
//vue3图形验证码
<template>
<div class="img-verify">
<canvas
ref="verify"
:width="width"
:height="height"
@click="handleDraw"
></canvas>
</div>
</template>
<script>
import { reactive, onMounted, ref, toRefs, defineEmits } from "vue";
export default {
setup(props, context) {
const verify = ref(null);
const emit = defineEmits(["get-code"]);
const state = reactive({
pool: "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890", // 字符串
width: 120,
height: 40,
imgCode: "",
});
onMounted(() => {
// 初始化绘制图片验证码
state.imgCode = draw();
context.emit("get-code", state.imgCode);
});
// 点击图片重新绘制
const handleDraw = () => {