vue 滑动验证码,vue 滑块验证
这篇文章主要为大家详细介绍了某视频剪辑软件实现图片滑动验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现图片滑动验证的具体代码，供大家参考，具体内容如下
效果图：
1、引用自定义组件
从导入img0./资产/img。jpg ；
从导入img1./assets/img 1。jpg ；
从导入img2./assets/img 2。jpg ；
从导入img3./assets/img 3。jpg ；
从导入img4./assets/im G4。jpg ；
从导入img5./assets/im G5。jpg ；
从导入实体./components/PHP toslide
组件：{
索力得
},
2、使用
solid ref= slide block @ success= on success @ again= on again @ fulfilled= on fulfilled
@ fail= on fail @ refresh= on refresh :slider-text= text :imgs= imgs :accuracy= accuracy
/solide
data () {
返回{
消息： ,
文本： 向右滑动-,
毕业生
img0，
img1，
img2，
img3，
img4，
img5，
],
loginBtn: false，
精度：1,//精确度小，可允许的误差范围小；为一时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
formLabelAlign: {}，
}
}
方法：{
成功次数{
//console.log(验证通过);
this.loginBtn=true
this.msg=`登录成功，耗时${(次/1000)。到固定的年代`；
},
onFail () {
//console.log(验证不通过);
this.msg=
},
onRefresh () {
//console.log(点击了刷新小图标);
this.msg=
},
未完成(){
//console.log(刷新成功啦!);
},
onAgain () {
//console.log(检测到非人为操作的哦!);
this.msg=再试一次；
//刷新
这个。句柄click()；
},
handleClick () {
这个参考文献。滑块。reset()；
this.msg=
},
}
3、自定义组件文件
模板
div class= slide-verify :style= { width:w px } id= slide verify onselectstart=返回false
！-图片加载遮蔽罩-
div:class= { slider-verify-loading :load block } /div
画布：width=“w”:height=“h”ref=“canvas”/canvas
div v-if= show @ click= refresh class= slide-verify-refresh-icon /div
画布：width= w :height= h ref= block class= slide-verify-block /画布
！集装箱
div class= slide-verify-slider :class= { container-active :容器活动， container-success :容器成功， container-fail: containerFail}
div class= slide-verify-slider-mask :style= { width:slider mask width }
！-滑块-
div @ mousedown= slider down @ touch start= touchStartEvent @ touch move= touchMoveEvent @ touch end= touchEndEvent class= slide-verify-slider-mask-item :style= { left:slider left }
div class= slide-verify-slider-mask-item-icon /div
/div
/div
span class= slide-verify-slider-text“{ slider text } }/span
/div
/div
/模板
脚本
常数PI=数学；
函数sum (x，y) {
返回x y
}
功能方块(十){
返回x * x
}
导出默认值{
名称：“SlideVerify”，
道具：{
//块长度
我：{
类型：数量，
默认值：30,
},
//块半径
r: {
类型：数量，
默认值：6,
},
//画布宽度
女：{
类型：数量，
默认值：270,
},
//画布高度
h: {
类型：数量，
默认值：90,
},
sliderText: {
类型：字符串，
默认："幻灯片填充右侧",
},
准确度：{
类型：数量，
默认值：5,//若为-1 则不进行机器判断
},
显示：{
类型：布尔型，
默认值：真的，
},
imgs: {
类型：数组，
默认值：()=[],
},
},
data () {
返回{
containerActive: false，//容器活动类
容器成功：false，//容器成功类
containerFail: false，//容器失败类
canvasCtx: null，
blockCtx: null，
块：空，
块x:未定义，//容器随机位置
区块y:未定义，
L: this.l this.r * 2 3，//块实长
img:未定义，
originX:未定义，
来源：未定义
isMouseDown:假，
线索：[],
sliderLeft: 0，//块右偏移
slidermaskwidth:0，//掩码宽度，
成功：假，//错误修复修复了验证成功后还能滑动
loadBlock: true，//特性图片加载提示，防止图片没加载完就开始验证
时间戳：空，
}
},
已安装(){
this.init()
},
方法：{
init () {
this.initDom()
this.initImg()
this.bindEvents()
},
initDom () {
这个. block=这个.$ refs.block
this.canvasCtx=this .$refs.canvas.getContext(2d )
这个。阻止CTX=这个。阻止。获取上下文(“2d”)
},
initmg(){
const img=this.createImg(()={
//图片加载完关闭遮蔽罩
this.loadBlock=false
this.drawBlock()
this.canvasCtx.drawImage(img，0，0，this.w，this.h)
this.blockCtx.drawImage(img，0，0，this.w，this.h)
让{
块x: x
block_y: y，
r，
L
}=这个
让y=y - r * 2 - 1
设ImageData=this。阻止CTX。getimagedata(x，_y，L，L)；
这个。阻止。宽度=L；
这个。阻止CTX。putimagedata(ImageData，0，_y)
});
this.img=img
},
拉伸块(){
这个。block _ x=这个。getrandomnumberbyrange(this .L 10，这个。w -(这个L 10))
这个。block _ y=这个。getrandomnumberbyrange(10 this。r * 2，这个. h -(这个.L 10))
this.draw(this.canvasCtx，this.block_x，this.block_y， fill )
this.draw(this.blockCtx，this.block_x，this.block_y， clip )
},
绘制(ctx，x，y，操作){
让{
我，
r
}=这个；
ctx.beginPath()
ctx.moveTo(x，y)
ctx.arc(x l/2，y-r ^ 2，r，0.72 * PI，2.26 * PI)
ctx.lineTo(x l，y)
ctx.arc(x l r - 2，y l/2，r，1.21 * PI，2.78 * PI)
ctx.lineTo(x l，y l)
ctx.lineTo(x，y l)
ctx.arc(x r - 2，y l/2，r 0.4，2.76 * PI，1.24 * PI，true)
ctx.lineTo(x，y)
ctx.lineWidth=2
ctx.fillStyle=rgba(255，255，255，0.7)
ctx.strokeStyle=rgba(255，255，255，0.7)
ctx.stroke()
CTX[操作]()
//错误修复修复了火狐和工程师协会显示问题
CTX。globalcompositeoperation= destination-over
},
创建（加载){
const img=文档。createelement(“img”)；
img.crossOrigin=匿名
img.onload=onload
img.onerror=()={
img。src=这个。getrandommg()
}
img。src=这个。getrandommg()
返回图片
},
//随机生成图形文件名
getrandommg(){
//return require(./资产/img。jpg’)
const len=this。imgs。长度；
返回len 0？
这个。imgs【这个。getrandomnumberbyrange(0，len)]:
https://picsum.photos/300/150/？image=这个。getrandomnumberbyrange(0，1084)；
},
getRandomNumberByRange (start，end) {
返回数学。圆(数学。random()*(结束-开始)开始)
},
刷新(){
this.reset()
这个$emit(刷新)
},
sliderDown(事件){
如果(this.success)返回；
这个。originx=事件。clientx
这个。originy=事件。客户关系；
this.isMouseDown=true
这个。时间戳=新日期()；
},
touchStartEvent (e) {
如果(this.success)返回；
这个。originx=e .更改的触摸次数[0].pageX
这个。originy=e .更改的触摸次数[0].佩吉；
this.isMouseDown=true
这个。时间戳=新日期()；
},
bindEvents () {
文档。addevent侦听器( mousemove ，(e)={
如果(!this.isMouseDown)返回错误的
const moveX=e . clientx-this。originx
const moveY=e . clienty-thisoriginy
if (moveX 0 moveX 38=this.w)返回错误的
this.sliderLeft=moveX px
设左挡=(这个。w-40-20)/(这个。w-40)* moveX；
这个。阻止。风格。left=块左‘px’；
this.containerActive=true//添加活动
这个。滑块掩码宽度=moveX px
这个。踪迹。推(moveY)；
});
文档。addevent侦听器( mouseup ，(e)={
如果(!this.isMouseDown)返回错误的
this.isMouseDown=false
if (e.clientX===this.originX)返回错误的
this.containerActive=false//移除活动
这个。时间戳=新日期()-这个。时间戳；
常数{
拼接，
TuringTest测试测试
}=这个。verify()；
如果（拼接){
if (this.accuracy===-1) {
this.containerSuccess=true
成功=真
这个$emit(成功，这个。时间戳)；
返回；
}
if (TuringTest) {
//成功
this.containerSuccess=true
成功=真
这个emit(success ，this.timestamp)
}否则{
this.containerFail=true
这个$emit(再次)
}
}否则{
this.containerFail=true
这个发出(失败)
setTimeout(()={
this.reset()
}, 1000)
}
})
},
touchMoveEvent (e) {
如果(!this.isMouseDown)返回错误的
const moveX=e.changedTouches[0].pageX-这个。originx
const moveY=e.changedTouches[0].佩吉-这个。originy
if (moveX 0 moveX 38=this.w)返回错误的
this.sliderLeft=moveX px
设左挡=(这个。w-40-20)/(这个。w-40)* moveX；
这个。阻止。风格。left=块左‘px’；
this.containerActive=true
这个。滑块掩码宽度=moveX px
这个。踪迹。推(moveY)；
},
触摸事件(e) {
如果(!this.isMouseDown)返回错误的
this.isMouseDown=false
if (e.changedTouches[0]).pageX===this.originX)返回错误的
this.containerActive=false
这个。时间戳=新日期()-这个。时间戳；
常数{
拼接，
TuringTest测试测试
}=这个。verify()；
如果（拼接){
if (this.accuracy===-1) {
this.containerSuccess=true
成功=真
这个$emit(成功，这个。时间戳)；
返回；
}
if (TuringTest) {
//成功
this.containerSuccess=true
成功=真
这个emit(success ，this.timestamp)
}否则{
this.containerFail=true
这个$emit(再次)
}
}否则{
this.containerFail=true
这个发出(失败)
setTimeout(()={
this.reset()
}, 1000)
}
},
verify () {
const arr=this.trail //拖动y移动距离
常数平均值=arr。减少(总和)/减少长度//平均值
常数偏差=arr。map(x=x平均值)//偏差数组
常数标准偏差=数学。偏差。地图(正方形).减少(总和)/数组长度)//标准差
const left=parse int(this。阻止。风格。左)
常数精度=this.accuracy=1？1:这个。精度10?10:本。精确度；
返回{
拼接：math . ABS(left-this . block _ x)=1精度，
转向测试：一般！==stddev，//equal=非操作人员
}
},
重置(){
this.success=false
this.containerActive=false
this.containerSuccess=false
this.containerFail=false
这个。向左滑动=0；
这个。阻止。风格。左=0；
这个。滑块遮罩宽度=0；
//画布
让{
w，
h
}=这个；
this.canvasCtx.clearRect(0，0，w，h)
this.blockCtx.clearRect(0，0，w，h)
这个。块宽度=w
//生成图片
这个。img。src=这个。getrandommg()；
这个$emit(已履行)
},
}
}
/脚本
样式范围。幻灯片-验证{
位置：相对；
}
/* 图片加载样式*/。滑块-验证-加载{
位置：绝对；
top:0；
右：0;
左：0;
底部：0;
背景：rgba(255，255，255，0.9)；
z指数：999;
动画：加载1.5秒无限；
}
@关键帧载入{
0% {
不透明度：0.7;
}
100% {
不透明度：9;
}
}。幻灯片-验证-阻止{
位置：绝对；
左：0;
top:0；
}。幻灯片-验证-刷新-图标{
位置：绝对；
右：0;
top:0；
宽度：34px
高度：34px
光标：指针；
背景：url(./资产/icon _ light。png’)0-437 px；
背景-尺寸：34px 471px
}。滑动-验证-滑动条{
位置：相对；
文本对齐：居中；
宽度：100%;
高度：40px
行高：40px
/*边距-顶部：15px*/
背景：# f7f 9 fa
颜色：# 45494c
边框：1px实心# e4e 7 EB
}。幻灯片-验证-滑块-遮罩{
位置：绝对；
左：0;
top:0；
高度：40px
边框：0实心# 1991fa
背景：# D1 e9 Fe；
}。幻灯片-验证-滑块-遮罩-项目{
位置：绝对；
top:0；
左：0;
宽度：40px
高度：40px
背景：# fff
箱形阴影：0 0 3px rgba(0，0，0，0.3)；
光标：指针；
过渡：背景0.2秒线性；
}。滑动-验证-滑块-遮罩-项目：悬停{
背景：# 1991fa
}。滑动-验证-滑块-遮罩-项目：悬停。幻灯片-验证-滑块-遮罩-项目-图标{
背景-位置：0-13px；
}。幻灯片-验证-滑块-遮罩-项目-图标{
位置：绝对；
top:15px；
左：13px
宽度：14px
高度：12px
背景：url(./资产/icon _ light。png’)0-26px；
背景-尺寸：34px 471px
}。集装箱-活动。幻灯片-验证-滑块-遮罩-项目{
高度：38px
top:-1px；
边框：1px纯色# 1991fa
}。集装箱-活动。幻灯片-验证-滑块-遮罩{
高度：38px
边框宽度：1px
}。集装箱-成功。幻灯片-验证-滑块-遮罩-项目{
高度：38px
top:-1px；
边框：1px纯色# 52ccba
背景色：#52ccba！重要；
}。集装箱-成功。幻灯片-验证-滑块-遮罩{
高度：38px
边框：1px纯色# 52ccba
背景色：# d2f 4 ef
}。集装箱-成功。幻灯片-验证-滑块-遮罩-项目-图标{
背景-位置：0 0!重要；
}。容器-失败。幻灯片-验证-滑块-遮罩-项目{
高度：38px
top:-1px；
边框：1px纯色# f57a7a
背景色：#f57a7a！重要；
}。容器-失败。幻灯片-验证-滑块-遮罩{
高度：38px
边框：1px纯色# f57a7a
背景色：# fce1e1
}。容器-失败。幻灯片-验证-滑块-遮罩-项目-图标{
top:14px；
背景-位置：0 -82px！重要；
}。集装箱-活动。幻灯片-验证-滑块-文本，集装箱-成功。幻灯片-验证-滑块-文本，容器-失败。幻灯片-验证-滑块-文本{
显示：无；
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。