vue实现随机验证码功能的实例代码

先给大家展示下效果图：

1.html代码

div class=' form-group ' style=' display : flex；'差异跨度验证码：/span输入类型=' text ' id=' code ' v-model=' code ' class=' code ' placeholder='请输入您的验证码//div div class='登录-代码' @点击='刷新代码'！-验证码组件-s-identify :识别码='识别码'/s-identify/div/div 2。半铸钢钢性铸铁(Cast Semi-Steel)样式

/*验证码样式*/.代码{ width :124 px h8 :31 pxborder :1 px固体rgba(186，186，186，1)；}.登录代码cursor:指针；}3.js引入验证码组件，并且定义三个变量。

从导入侧标识'./components/side identify ' components 3360 { side identify }，data(){ return { identify code 3360 ' 1234567890 '，identifyCode: ' '，Code: ' '，//text框输入的验证码}},4 .已安装里的代码

mounted(){ this。identifycode=这个。制作代码(这个。识别码，4)；},5.在创造里初始化验证码

6 .方法里添加以下方法。

需要用到的方法

//验证码randomNum(min，max){返回数学。地板(数学。random()*(max-min)min)；}，刷新代码(){ this。identifycode=这个。制作代码(这个。识别码，4)；}，makeCode(o，l) { for(让I=0；我。我){这个。识别代码=这个。识别代码[这个。randomnum(0，这个。识别代码。长度)]；}控制台。日志(这个。identify code)；},在提交表单的时候对验证码进行判断。

sidentify.vue组件代码：

模板div class=' s-canvas ' canvas id=' s-canvas ' : width=' content width ' : height=' content height '/canvas/div/模板脚本导出默认值{ name : ' SIdentify '，prop 3360 {识别代码： { type : String，default: '1234' }，字号min 33: { type 33333: Number，default: 25生成一个随机数randomNum(min，max){返回数学。地板(数学。random()*(max-min)min)}，//生成一个随机的颜色randomColor(min，max) {让r=this.randomNum(min，max)让g=this.randomNum(min，max)让b=this.randomNum(min，max)返回rgb(' r '，' g '，' b ')' }，draw pic(){让canvas=document。getelementbyid(' s-canvas ')让CTX=canvas。getcontext(' 2d ')CTX。textbaseline=' bottom '//绘制背景CTX。fillstyle=this。randomcolor(这个。backgroundcolormin这个。背景色彩最大)CTX。填充矩形(0，0，this.contentWidth，this.contentHeight) //绘制文字用于(设I=0；我喜欢这个。识别代码。长度；i ) { this.drawText(ctx，this.identifyCode[i]，I)}这个。(CTX)画这条线。画点(ctx)，画文字(CTX，txt，I){ CTX。fillstyle=this。randomcolor(这个。colormin这个。CTX。font=this。randomnum(这个。字体大小，这个。font sizemax)' px SimHei '让x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度))让y修改坐标原点和旋转角度平移(x，y)旋转(度*数学).PI/180) ctx.fillText(txt，0，0) //恢复坐标原点和旋转角度旋转(-度*数学. PI/180) ctx.translate(-x，-y) }，drawLine(ctx) { //绘制干扰线用于(设I=0；i5；我){ CTX。strokestyle=这个。randomcolor(这个。linecolormin这个。CTX。贝金帕斯(CTX)。moveto(this.randomNum(0，this.contentWidth)，this.randomNum(0，this。内容高度))CTX。行到(这个。randomnum(0，this.contentWidth)，this。randomnum(0，这个。内容高度))CTX。stroke()}，drawDot(ctx) { //绘制干扰点用于(设I=0；CTX。fillstyle=this。兰多姆颜色(0，255)CTX。begin path()CTX。arc(this.randomNum(0，this.contentWidth)，this。randomnum(0，this.contentHeight)，1，0，2 * Math .PI) ctx.fill() } } }，watch : { identifyCode(){ this。draw pic()} }，mounted(){ this。draw pic()}/脚本样式范围。s-canvas { height : 38px；}.s-canvas canvas { margin-top : 1px；左边距left: 8px}/样式总结

以上所述是小编给大家介绍的某视频剪辑软件实现随机验证码功能的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！