Vue实现验证码功能
本文实例为大家分享了Vue实现验证码的具体代码，供大家参考，具体内容如下
1.效果
2.代码
2.1创建js组件
内容
（可直接粘贴过去，需要改宽度和高度，修改_init方法中的宽和高）
functionGVerify(options){//创建一个图形验证码对象，接收options对象为参数
this.options={//默认options参数值
id:'',//容器Id
canvasId:'verifyCanvas',//canvas的ID
width:'80',//默认canvas宽度
height:'30',//默认canvas高度
type:'number',//图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
code:''
}
if(Object.prototype.toString.call(options)==='[objectObject]'){//判断传入参数类型
for(variinoptions){//根据传入的参数，修改默认参数值
this.options[i]=options[i]
}
}else{
this.options.id=options
}
this.options.numArr='0,1,2,3,4,5,6,7,8,9'.split(',')
this.options.letterArr=getAllLetter()
this._init()
this.refresh()
}
GVerify.prototype={
/**版本号**/
version:'1.0.0',
/**初始化方法**/
_init:function(){
varcon=document.getElementById(this.options.id)
varcanvas=document.createElement('canvas')
//this.options.width=con.offsetWidth>0?con.offsetWidth:'30'
//this.options.height=con.offsetHeight>0?con.offsetHeight:'30'
this.options.width='160'
this.options.height='50'
canvas.id=this.options.canvasId
canvas.width=this.options.width
canvas.height=this.options.height
canvas.style.cursor='pointer'
canvas.innerHTML='您的浏览器版本不支持canvas'
con.appendChild(canvas)
varparent=this
canvas.onclick=function(){
parent.refresh()
}
},
/**生成验证码**/
refresh:function(){
varcanvas=document.getElementById(this.options.canvasId)
if(canvas.getContext){
varctx=canvas.getContext('2d')
}
ctx.textBaseline='middle'
ctx.fillStyle=randomColor(180,240)
ctx.fillRect(0,0,this.options.width,this.options.height)
if(this.options.type==='blend'){//判断验证码类型
vartxtArr=this.options.numArr.concat(this.options.letterArr)
}elseif(this.options.type==='number'){
vartxtArr=this.options.numArr
}else{
vartxtArr=this.options.letterArr
}
for(vari=1;i<=4;i++){
vartxt=txtArr[randomNum(0,txtArr.length)]
this.options.code+=txt
ctx.font=randomNum(this.options.height/2,this.options.height)+'pxSimHei'//随机生成字体大小
ctx.fillStyle=randomColor(50,160)//随机生成字体颜色
ctx.shadowOffsetX=randomNum(-3,3)
ctx.shadowOffsetY=randomNum(-3,3)
ctx.shadowBlur=randomNum(-3,3)
ctx.shadowColor='rgba(0,0,0,0.3)'
varx=this.options.width/5*i
vary=this.options.height/2
vardeg=randomNum(-30,30)
/**设置旋转角度和坐标原点**/
ctx.translate(x,y)
ctx.rotate(deg*Math.PI/180)
ctx.fillText(txt,0,0)
/**恢复旋转角度和坐标原点**/
ctx.rotate(-deg*Math.PI/180)
ctx.translate(-x,-y)
}
/**绘制干扰线**/
for(vari=0;i<4;i++){
ctx.strokeStyle=randomColor(40,180)
ctx.beginPath()
ctx.moveTo(randomNum(0,this.options.width),randomNum(0,this.options.height))
ctx.lineTo(randomNum(0,this.options.width),randomNum(0,this.options.height))
ctx.stroke()
}
/**绘制干扰点**/
for(vari=0;i
2.2登录页面
2.2.1引入组件
[....
.verify_css{
width:45%;
}
.login-wrap{
position:relative;
width:100%;
height:100%;
}
.ms-title{
position:absolute;
top:50%;
width:100%;
margin-top:-230px;
text-align:center;
font-size:30px;
color:#fff;
}
.ms-login{
position:absolute;
left:50%;
top:50%;
width:300px;
height:13rem;
margin:-150px00-190px;
padding:40px;
border-radius:6%;
background:#fff;
box-shadow:-2px-2px17px1px#1e9fff;
}
.login-btn{
text-align:center;
}
.login-btnbutton{
width:100%;
height:36px;
}
.video-bg{
min-width:100%;
min-height:100%;
width:100%;
height:100%;
opacity:0.9;
}
video{
width:100%;
height:100%;
object-fit:cover;
/*opacity:0.6;*/
}
.loginBtn:hover{
box-shadow:0px1px4pxrgba(0,0,0,0.3),
0px0px20pxrgba(0,0,0,0.1)inset;
}
#v_container{
width:auto;
height:auto;
display:inline-flex;
position:relative;
top:1rem;
margin-top:-2rem;
}
git参考源码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。