vue3.0实现点击切换验证码（组件）及校验本⽂实例为⼤家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码，供⼤家参考，具体内容如下
先看效果
⽗组件
<template>
<div class="login">
<van-field
center
clearable
label="验证码"
placeholder="输⼊验证码"
v-model="verify"
>
<template #button>
<vueImgVerify ref="verifyRef" />
</template>
</van-field>
<span >点击更换验证码</span>
<van-button round block type="info" native-type="submit" @click="btn">
提交
</van-button>
</div>
</template>
<script>
// ref 接受⼀个内部值并返回⼀个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。
import { reactive, ref, toRefs } from "vue";
import vueImgVerify from "../views/lv.vue"; // 引⼊的⼦组件
import { Toast } from "vant";
export default {
components: {
vueImgVerify,
},
setup() {
const verifyRef = ref(null);
const state = reactive({
verify: "",
});
const btn = function() {
// console.log(verifyRef.value.imgCode);
// console.log(state.verify);
if (verifyRef.value.imgCode === state.verify) {
Toast.success("验证码输⼊正确");
} else {
Toast.fail("验证码输⼊错误");
}
};
return {
.
..toRefs(state),
btn,
verifyRef,
};
},
};
</script>
<style lang="less"></style>
reactive, ref, toRefs 可以去官⽹查看各代表的含义
⼦组件封装组件，即⽤即粘贴
<template>
<div class="img-verify">
<canvas ref="verify" :width="width" :height="height" @click="handleDraw"></canvas>
</div>
</template>
<script type="text/ecmascript-6">
import { reactive, onMounted, ref, toRefs } from 'vue'
export default {
setup() {
const verify = ref(null)
const state = reactive({
pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', // 字符串
width: 120,
height: 40,
imgCode: ''
})
onMounted(() => {
// 初始化绘制图⽚验证码
state.imgCode = draw()
})
// 点击图⽚重新绘制
const handleDraw = () => {
state.imgCode = draw()
}
// 随机数
const randomNum = (min, max) => {
return parseInt(Math.random() * (max - min) + min)
}
// 随机颜⾊
const randomColor = (min, max) => {
const r = randomNum(min, max)
const g = randomNum(min, max)
const b = randomNum(min, max)
return `rgb(${r},${g},${b})`
}
// 绘制图⽚
const draw = () => {
// 3.填充背景颜⾊，背景颜⾊要浅⼀点
const ctx = Context('2d')
// 填充颜⾊
ctx.fillStyle = randomColor(180, 230)
// 填充的位置
ctx.fillRect(0, 0, state.width, state.height)
// 定义paramText
let imgCode = ''
/
/ 4.随机产⽣字符串，并且随机旋转
for (let i = 0; i < 4; i++) {
// 随机的四个字
const text = state.pool[randomNum(0, state.pool.length)]
imgCode += text
// 随机的字体⼤⼩
const fontSize = randomNum(18, 40)
// 字体随机的旋转⾓度
const deg = randomNum(-30, 30)
/*
* 绘制⽂字并让四个⽂字在不同的位置显⽰的思路 :
* 1、定义字体reactive vue3
* 2、定义对齐⽅式
* 3、填充不同的颜⾊
* 4、保存当前的状态（以防⽌以上的状态受影响）
* 5、平移translate()
* 6、旋转 rotate()
* 7、填充⽂字
* 8、restore出栈
* */
ctx.font = fontSize + 'px Simhei'
ctx.fillStyle = randomColor(80, 150)
/*
* save() ⽅法把当前状态的⼀份拷贝压⼊到⼀个保存图像状态的栈中。
* 这就允许您临时地改变图像状态，
* 然后，通过调⽤ restore() 来恢复以前的值。
* save是⼊栈，restore是出栈。
* ⽤来保存Canvas的状态。save之后，可以调⽤Canvas的平移、放缩、旋转、错切、裁剪等操作。 restore：⽤来恢复Canvas之前保存的状态。防⽌save后对Canvas执⾏的操作对后续的绘制有影响。  *
* */
ctx.save()
// fillText() ⽅法在画布上绘制填⾊的⽂本。⽂本的默认颜⾊是⿊⾊。
// 请使⽤ font 属性来定义字体和字号，并使⽤ fillStyle 属性以另⼀种颜⾊/渐变来渲染⽂本。
// context.fillText(text,x,y,maxWidth);
ctx.fillText(text, -15 + 5, -15)
}
// 5.随机产⽣5条⼲扰线,⼲扰线的颜⾊要浅⼀点
for (let i = 0; i < 5; i++) {
ctx.beginPath()
ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
ctx.strokeStyle = randomColor(180, 230)
ctx.closePath()
ctx.stroke()
}
// 6.随机产⽣40个⼲扰的⼩点
for (let i = 0; i < 40; i++) {
ctx.beginPath()
ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
ctx.closePath()
ctx.fillStyle = randomColor(150, 200)
ctx.fill()
}
return imgCode
}
return {
...toRefs(state),
verify,
handleDraw
}
}
}
</script>
<style type="text/css">
.img-verify canvas {
cursor: pointer;
}
</style>
关于vue.js的学习教程，请⼤家点击专题、进⾏学习。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。