vue实现图形验证码,vue 验证码
这篇文章主要为大家详细介绍了某视频剪辑软件实现分割验证码效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现分割验证码效果的具体代码，供大家参考，具体内容如下
注：该代码存在问题，因为我maxlength=4，输入的宽度跟屏幕同宽，所以当我投入里面的长度==4的时候，我的光标会超出屏幕，所以我在长度==4的时候做了一个把光标放到第三个的处理，这种虽用户体验不好，也解了长度==4的时候整个布局乱了的燃眉之急
上用户界面图
上代码：
某视频剪辑软件
模板
差异
v-main class=bgi
v-container class=验证
v形图标@ click= verify show=false color= # 000 MDI-close/v形图标
差异
验证标题输入验证码/p
v-show=verifyStatus==1
验证码已发送至span {{ 地区电话} span
/p
v-show=verifyStatus==3
验证码不正确，请重新输入
/p
div class=verifyInputBox
div class=验证输入BG验证输入BG 1 /div
div class= verify input BG verify input BG 2 /div
div class= verify input BG verify input BG 3 /div
div class= verify input BG verify input BG 4 /div
投入
ref=verifyInput
type=text
class=verifyInput
maxlength=4
v-model=verifyInput
/
/div
虚拟按钮
:disabled=restTimeShow
概述
瓷砖
class=nextBtn
@click=verifyConfirm
确定
/v-btn
v-show=restTimeShow
重新获取(span{{ restTime }}/span
s)
/p
/div
/v-容器
/v-main
/div
/模板
钢性铸铁
样式lang=scss 范围。bgi {
宽度：100vw
身高：100vh
背景：URL( ~ @/assets/imgs/banner。png’)；
背景尺寸：100% 100%;
背景-重复：不重复；
p {
边距-底部：0;
}。验证{
宽度：100%;
身高：100%;
位置：相对；
颜色：# 000;
背景：# fff。验证标题{
左边距：2rem
页边距-顶部：3r em
字体大小：1.4红色；
}。验证标题1 {
左边距：2rem
边距-顶部：0.6雷姆；
字体大小：0.8125雷姆；
跨度{
颜色：# bfbfbf
}
}。验证标题2 {
左边距：2rem
边距-顶部：0.6雷姆；
字体大小：0.8125雷姆；
颜色：# f53f3f
}
输入：-webkit-input-placeholder {
颜色：# 000;
}。验证输入框{
宽度：20雷姆；
margin:3 rem auto 0；
位置：相对；
身高：4雷姆；
z指数：1;verifyInputBg {
位置：绝对；
z指数：2;
身高：4雷姆；
宽度：4个项目
边框半径：0.2毫米；
背景：rgba($color: #000，$ alpha:0.1)；
}。verifyInputBg2 {
左：5.33雷姆；
}。verifyInputBg3 {
左：10.66雷姆；
}。验证输入4 {
左：16雷姆；
}。验证输入{
身高：4雷姆；
行高：4个项目
宽度：100%;
字母间距：4.53毫米；
左填充：1.5雷姆；
字体大小：1.4红色；
字体粗细：700;
位置：绝对；
z指数：3;
}
}。休息时间{
页边距-顶部：1雷姆；
颜色：# bfbfbf
字体大小：0.8125雷姆；
文本对齐：居中；
}
}。nextBtn {
页边距-顶部：2雷姆；
左边距：2rem
宽度：calc(100%-4雷姆)；
身高：3雷姆！重要；
背景：# ff962b
边界半径：0.3125雷姆；
字体大小：1雷姆；
颜色：#ffffff！重要；
边框：无；
}。nextBtn:已禁用{
背景：# d2d2d2
颜色：#ffffff！重要；
}
}
/风格
脚本
脚本
导出默认值{
名称：登录，
data() {
返回{
面积： 86 ,
电话： ,
验证输入："",
验证状态："1",//1 -验证码发送至 2 - 正在验证验证码 3 - 验证码错误
restTimer: null，
休息时间：60,
restTimeShow: false，
};
},
观察：{
verifyInput(newVal) {
if (newVal.length==4) {
这个. nextTick(()={
让验证输入=this .$ refs.verifyInput
验证输入。setselectionrange(3，3)；
});
这个。验证确认()；
}
},
},
方法：{
verifyConfirm() {
this.restTimeShow=true
这个。验证状态=2；
这个。rest time fun()；
},
restTimeFun() {
如果(!this.restTimer) {
this.restTime=60
这个。rest timer=setInterval(()={
if (this.restTime 0) {
这个。休息时间-；
}否则{
this.restTimeShow=false
清除间隔(这个。休息计时器)；
this.restTimer=null
}
}, 1000);
}
},
},
};
/脚本
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。