vue验证码输入框,vue滑动验证组件
这篇文章主要为大家详细介绍了vue3.0实现点击切换验证码（组件)及校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3.0实现点击切换验证码（组件)及校验的具体代码，供大家参考，具体内容如下
先看效果
父组件
模板
div class=登录
范菲尔德
中心
可清除的
标签=验证码
占位符=输入验证码
v-model=验证
模板#按钮
vueImgVerify ref=verifyRef /
/模板
/范-菲尔德
span style=margin:20px 点击更换验证码/span
范按钮圆块类型=信息原生类型=提交 @点击= BTN
提交
/货车按钮
/div
/模板
脚本
//ref接受一个内部值并返回一个响应式且可变的裁判员对象参考文献对象具有指向内部值的单个财产。价值。
从“vue”导入{ reactive，ref，tore fs }；
从导入vueImgVerify./views/LV。vue ；//引入的子组件
从"万特"导入{ Toast }；
导出默认值{
组件：{
vueImgVerify，
},
setup() {
const verify ref=ref(null)；
恒定状态=反应({
验证： ,
});
const btn=function() {
//控制台。日志(验证参考。价值。img码)；
//控制台。日志(状态。验证)；
如果(验证参考价值。img代码===状态。验证){
祝你成功验证码输入正确);
}否则{
Toast.fail(验证码输入错误);
}
};
返回{
.toRefs(州),
btn，
verifyRef，
};
},
};
/脚本
style lang=less/style
无功、参考、参考可以去官网查看各代表的含义官网
子组件封装组件，即用即粘贴
模板
div class= img-验证
canvas ref= verify :width= width :height= height @ click= handle draw /canvas
/div
/模板
脚本类型=text/ecmascript-6
从“vue”导入{反应式、开启式、参考式、参考式}
导出默认值{
setup() {
const verify=ref(null)
恒定状态=反应({
pool: abcdefghijklmnopqrstuvwxyz 1234567890 ，//字符串
宽度：120,
身高：40,
imgCode:" "
})
onMounted(()={
//初始化绘制图片验证码
state.imgCode=draw()
})
//点击图片重新绘制
const handleDraw=()={
state.imgCode=draw()
}
//随机数
const randomNum=(min，max)={
返回parse int(数学。random()*(max-min)min)
}
//随机颜色
const randomColor=(min，max)={
const r=randomNum(最小值，最大值)
const g=randomNum(最小值，最大值)
const b=randomNum(最小值，最大值)
返回rgb(${r}，${g}，${b})
}
//绘制图片
const draw=()={
//3.填充背景颜色，背景颜色要浅一点
常量CTX=验证。价值。获取上下文(“2d”)
//填充颜色
ctx.fillStyle=randomColor(180，230)
//填充的位置
ctx.fillRect(0，0，state.width，state.height)
//定义参数文本
设imgCode=
//4.随机产生字符串，并且随机旋转
对于(设I=0；I 4；i ) {
//随机的四个字
const text=州。pool[随机数(0，state.pool.length)]
imgCode=text
//随机的字体大小
const fontSize=randomNum(18，40)
//字体随机的旋转角度
const deg=randomNum(-30，30)
/*
* 绘制文字并让四个文字在不同的位置显示的思路：
* 1、定义字体
* 2、定义对齐方式
* 3、填充不同的颜色
* 4、保存当前的状态（以防止以上的状态受影响)
* 5、平移翻译()
* 6、旋转旋转()
* 7、填充文字
* 8、恢复出栈
* */
ctx.font=fontSize px Simhei
ctx.textBaseline=top
ctx.fillStyle=randomColor(80，150)
/*
*保存()方法把当前状态的一份拷贝压入到一个保存图像状态的栈中。
* 这就允许您临时地改变图像状态，
* 然后，通过调用还原()来恢复以前的值。
*保存是入栈，恢复是出栈。
*用于保存画布的状态。保存后可以调用画布的平移、缩放、旋转、错切、裁剪等操作。恢复：用于恢复画布之前保存的状态。防止保存后在画布上进行的操作影响后续绘图。
*
* */
ctx.save()
ctx.translate(30 * i 15，15)
ctx.rotate((deg * Math。圆周率)/180)
//fillText()方法在画布上绘制填充的文本。文本的默认颜色是黑色。
//请使用font属性定义字体和大小，并使用fillStyle属性以另一种颜色/渐变呈现文本。
//context.fillText(text，x，y，maxWidth)；
ctx.fillText(text，-15 5，-15)
ctx.restore()
}
//5.随机生成5条干涉线，干涉线颜色要浅一些。
for(设I=0；i5；i ) {
ctx.beginPath()
ctx.moveTo(randomNum(0，state.width)，randomNum(0，state.height))
ctx.lineTo(randomNum(0，state.width)，randomNum(0，state.height))
CTX . stroke style=random color(180，230)
ctx.closePath()
ctx.stroke()
}
//6.随机生成40个干涉点。
for(设I=0；i 40i ) {
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()
}
返回imgCode
}
返回{
.toRefs(州)，
验证，
拉手抽屉
}
}
}
/脚本
style type=text/css 。img-验证画布{
光标：指针；
}
/风格
vue.js的学习教程请点击专门的vue.js组件学习教程和Vue.js前端组件学习教程进行学习。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。