vue 验证登录,vue项目登录获取验证码
最近在自己写页面，然后写登录注册用户界面的时候需要一个验证码组件，去搜一下没找到什么合适的，于是自己写一个，这篇文章主要给大家介绍了关于某视频剪辑软件实现验证码登录的相关资料，需要的朋友可以参考下
目录
效果展示第一步：创建验证码组件第二步：引入验证码组件并注册使用总结
效果展示
第一步：创建验证码组件
这里是组件的代码，可以自行命名文件名，我这里命名为SIdentify.vue
模板
画布
画布id= s-canvas :width=内容宽度:height=内容高度/canvas
/div
/模板
脚本
导出默认值{
名称：侧面识别，
道具：{
识别码：{
类型：字符串，
默认值："1234"
},
fontSizeMin: {
类型：数量，
默认值：25
},
fontSizeMax: {
类型：数量，
默认值：30
},
backgroundColorMin: {
类型：数量，
默认值：255
},
backgroundColorMax: {
类型：数量，
默认值：255
},
colorMin: {
类型：数量，
默认值：0
},
colorMax: {
类型：数量，
默认值：160
},
lineColorMin: {
类型：数量，
默认值：100
}，lineColorMax: {
类型：数量，
默认值：255
},
dotColorMin: {
类型：数量，
默认值：0
},
dotColorMax: {
类型：数量，
默认值：255
},
内容宽度：{
类型：数量，
默认值：112
},
内容高度：{
类型：数量，
默认值：31
}
},
方法：{
//生成一个随机数
随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)
},
//生成一个随机的颜色
随机颜色(最小值，最大值){
设r=this.randomNum(最小值，最大值)
设g=this.randomNum(最小值，最大值)
设b=this.randomNum(最小值，最大值)
返回" rgb( r ， g ， b )"
},
drawPic() {
让画布=文档。getelementbyid( s-canvas )
let ctx=canvas.getContext(2d )
ctx.textBaseline=bottom
//绘制背景
CTX。填充样式=this。随机颜色(这个。背景色最小值，this.backgroundColorMax)
ctx.fillRect(0，0，this.contentWidth，this.contentHeight)
//绘制文字
对于(设I=0；我这个。识别代码。长度；i ) {
this.drawText(ctx，this.identifyCode[i]，I)
}
本。画线(ctx)
这个。绘图点(ctx)
},
drawText(ctx，txt，i) {
CTX。填充样式=this。随机颜色(这个。color min，this.colorMax)
CTX。font=this。random num(这个。最小字体大小，this.fontSizeMax) px SimHei
设x=(I ^ 1)*(这个。内容宽度/(这个。识别代码。长度^ 1))
设y=这个。random num(这个。最大字体大小，this.contentHeight - 5)
var deg=this.randomNum(-45，45)
//修改坐标原点和旋转角度
ctx.translate(x，y)
ctx.rotate(度数*数学/180).
ctx.fillText(txt，0，0)
//恢复坐标原点和旋转角度
CTX . rotate(-deg * Math ./180).
ctx.translate(-x，-y)
},
绘制线(ctx) {
//绘制干扰线
对于(设I=0；i5；i ) {
CTX。笔画风格=这个。随机颜色(这个。线条颜色最小值，this.lineColorMax)
ctx.beginPath()
ctx.moveTo(this.randomNum(0，this.contentWidth)，this.randomNum(0，this.contentHeight))
ctx.lineTo(this.randomNum(0，this.contentWidth)，this.randomNum(0，this.contentHeight))
ctx.stroke()
}
},
绘图点(ctx) {
//绘制干扰点
对于(设I=0；i 80i ) {
CTX。填充样式=this。随机颜色(0.255)
ctx.beginPath()
ctx.arc(this.randomNum(0，this.contentWidth)，this.randomNum(0，this.contentHeight)，1，0，2 * Math .PI)
ctx.fill()
}
}
},
观察：{
identifyCode() {
this.drawPic()
}
},
已安装(){
this.drawPic()
}
}
/脚本
样式范围。表示“上帝的”: sblood画布{
高度：38px
}。帆布画布
边距-顶部：1px
左边距：8px
}
/风格
第二步：引入验证码组件并注册使用
这里数据里面的识别码的值就是所生成的验证码的值，可以通过该码自行发挥逻辑操作，侧面识别组件其实只是为了显示验证码图片而已，所以不用该组件还可以做成伪手机验证码登录
模板
差异
侧面标识符：标识码=标识码
/s识别
/div
/模板
//引入登录验证组件
从" @/组件/侧面标识符"导入侧面标识；
脚本
导出默认值{
名称：侧面识别，
组件：{ SIdentify }，
data(){
返回{
identifyCode: ，//密码登录图形验证码
识别码： 1234567890 abcdefghizklmnopqrstuvwxyz ，//生成图形验证码的依据
}
},
方法：{
//刷新验证码
refreshdididentifycode(){
这个。识别代码=" "；
这个。makedidentifycode(4)；
},
//生成四位数的随机验证码
makeIdentifyCode(l) {
对于(设I=0；I l；i ) {
this.identifyCode=
这个。识别代码[这个。random num(0，这个。识别代码。长度)]；
}
},
//生成单个验证码
随机编号(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)；
},
},
已安装(){
//初始化验证码
这个。识别代码=" "；
这个。makedidentifycode(4)；
},
}
/脚本
总结
到此这篇关于某视频剪辑软件实现验证码登录的文章就介绍到这了，更多相关某视频剪辑软件验证码登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。