vue项目登录获取验证码,vue登录验证码插件
这篇文章主要为大家详细介绍了某视频剪辑软件实现网前端登录页数字验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现网前端登录页数字验证码的具体代码，供大家参考，具体内容如下
1.创建code.js文件夹下面是射流研究…代码
功能验证(选项){
控制台。log()；//创建一个图形验证码对象，接收选择对象为参数
这个。con=文档。getelementbyid(选项)
this.options={ //默认选择参数值
id: ，//容器身份
canvasId:"验证画布" ,//画布的身份
width: this.con.offsetWidth，//默认帆布宽度
高度：this.con.offsetHeight，//默认帆布高度
类型：数字,//图形验证码默认类型混合：数字字母混合类型、数量：纯数字、信：纯字母
代码：""
}
如果(对象。原型。托斯特林。call(options)===[Object Object]){//判断传入参数类型
对于(选项中的变量I){//根据传入的参数，修改默认参数值
选项[我]
}
}否则{
this.options.id=options
}
这个。选项。numar= 0，1，2，3，4，5，6，7，8，9 。拆分(,)
这个。选项。letterarr=getall letter()
这个. init()
this.refresh()
}
GVerify.prototype={
/** 版本号**/
版本："1.0.0",
/** 初始化方法**/
_init: function () {
var canvas=文档。createelement(“画布”)
画布。id=这个。选项。canvasid
让{宽度，高度}=this.options
画布宽度=宽度
canvas.height=高度
canvas.style.cursor=pointer
canvas.innerHTML=您的浏览器版本不支持画布
this.con.appendChild(画布)
var parent=this
canvas.onclick=function () {
parent.refresh()
}
},
/** 生成验证码**/
刷新：函数(){
var canvas=文档。getelementbyid(这个。选项。canvasid)
if (canvas.getContext) {
var ctx=canvas.getContext(2d )
}
ctx.textBaseline=middle
ctx.fillStyle=randomColor(180，240)
ctx.fillRect(0，0，this.options.width，this.options.height)
如果(这个。选项。type=== blend ){//判断验证码类型
var tx tarr=this。选项。努玛。concat(这个。选项。letterarr)
} else if(这个。选项。type=== number ){
var tx tarr=this。选项。努马尔
}否则{
var tx tarr=this。选项。字母arr
}
this.options.code=
for(var I=1；I=4；i ) {
var txt=txtArr[randomNum(0，txtArr.length)]
this.options.code=txt
CTX。font=random num(这个。选项。身高/2，这个。选项。height) px sim hei //随机生成字体大小
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)
var x=this.options.width/5 * i
var y=this.options.height/2
var deg=randomNum(-30，30)
/** 设置旋转角度和坐标原点**/
ctx.translate(x，y)
ctx.rotate(度数*数学/180).
ctx.fillText(txt，0，0)
/** 恢复旋转角度和坐标原点**/
CTX . rotate(-deg * Math ./180).
ctx.translate(-x，-y)
}
/** 绘制干扰线**/
for(var I=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(var I=0；我这个。选项。宽度/4；i ) {
ctx.fillStyle=randomColor(0，255)
ctx.beginPath()
ctx.arc(randomNum(0，this.options.width)，randomNum(0，this.options.height)，1，0，2 * Math .PI)
ctx.fill()
}
},
/** 验证验证码**/
验证：函数（代码){
var code=code.toLowerCase()
var v _ code=this。选项。代码。tolowercase()
if (code==v_code) {
返回真实的
}否则{
返回错误的
}
}
}
/** 生成字母数组**/
函数getAllLetter() {
var letterStr=a，B，C，D，E，F，G，H，I，J，K，L，M，N，O，P，Q，R，S，T，U，V，W，X，Y，Z，A，B，C，D，E，F，G，H，I，J，K，L，M，N，O，P，Q，R，S，T，U，V，W，X，Y，Z
return letterStr.split(，)
}
/** 生成一个随机数**/
函数随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)
}
/** 生成一个随机色**/
函数随机颜色(最小值，最大值){
var r=randomNum(最小值，最大值)
var g=randomNum(最小值，最大值)
var b=randomNum(最小值，最大值)
返回" rgb( r ， g ， b )"
}
导出{
GVerify
}
code.js在组件中引入
3.在数据中定义如下两个属性
值：,
验证代码："",
4.在安装好的中执行方法
已安装(){
这个。验证码=new g verify( auth _ code )；
},
5.在模板中定义差异需要给差异设置宽高
div id=auth_code/div
6.在登录请求前进行判断成功向下执行，失败返回并同时执行this.verifyCode.refresh()方法切换验证码，同时按照逻辑在登录失败账号或密码错误时也需要执行this.verifyCode.refresh()切换验证码
如果(这个。验证代码。验证(这个。值)){
}否则{
这个消息({
消息： 验证码错误，
类型："警告"
});
这个。验证代码。刷新()；
返回
}
7.效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。