vue 登录验证,vue登录验证码插件
这篇文章主要为大家详细介绍了某视频剪辑软件登录页面设置验证码投入框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件登录页面设置验证码投入框的具体代码，供大家参考，具体内容如下
1、效果
2、代码
第一步：建立子组件（举例，文件名可自己取) - 代码如下
子组件侧面识别的完整代码：
模板
画布
画布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,
},
内容宽度：{
类型：数量，
默认值：132,
},
内容高度：{
类型：数量，
默认值：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.fillStyle=this.randomColor(
this.backgroundColorMin，
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=
这个。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((deg * Math .圆周率)/180)
ctx.fillText(txt，0，0)
//恢复坐标原点和旋转角度
旋转((-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 *数学。产品改进(产品改进)
)
ctx.fill()
}
},
},
观察：{
identifyCode() {
this.drawPic()
},
},
已安装(){
this.drawPic()
},
}
/脚本
样式范围。表示“上帝的”: sblood画布{
高度：38px
}。帆布画布
边距-顶部：1px
左边距：8px
}
/风格
第二步：在父组件中导入并注册子组件
导入侧标识自./侧面标识
导出默认值{
组件：{
侧面识别
},
data(){
返回{
代码：,
输入代码：,
}
},
}
第三步：在登录表单上加上验证码的样式
el-form-item prop=输入代码
div style= display:flex id= ATI location
埃尔输入
type=text
class=verificationcode
ref=inputCode
v-model=loginForm.inputCode
style=width:175px
prefix-icon=el-icon-key
占位符=请输入验证码
可清除的
/el-input
span @ click=创建代码 id= span代码
侧面标识符：标识符代码=“代码”/侧面标识符
/span
/div
/El-表单-项目
第四步： 父组件中随机生成一串字符串-数字字母
已安装(){
this.createCode()
},
方法：{
createCode() {
var text=
var possible= abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz 0123456789 ；
//设置验证码长度，
for(var I=0；I 4；i ){
文本=可能。charat(数学。地板(数学。random()*可能。长度))；
}
this.code=text
},
}
第五步：在点击登录按钮后的方法中判断验证码部分（加 .toLowerCace() 是为了不区分大小写）
if(this.inputCode==){
这个message.error(请输入验证码)
返回
}
if(this.inputCode.toLowerCase()！=this.code.toLowerCase()){
这个message.error(验证码错误)
this.inputCode=
this.createCode()
返回
}
具体位置如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。