vue滑块验证插件,vue图片验证码插件
这篇文章主要为大家详细介绍了某视频剪辑软件自定义开发滑动图片验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯前端，通过帆布来自定义开发滑动图片验证，反过来也能完成纯滑动验证。
模板
div class=验证ref=验证
！-画布部分-
画布ref= slide verify class= slide-img /画布
div style=display:none
img ref= imgs :src= img list[imgIndex]/
/div
！-下面滑块部分-
div class= slide-wrapper BG-start
！-滑块-
div class= BTN ref= BTN @ mouseDown= mouseDown @ mouseUp= mouseUp /div
p class= text ref= text { content } }/p
div class=bg ref=bg/div
/div
！-刷新按钮-
按钮class= refresh @ click= refresh /按钮
/div
/模板
脚本
导出默认值{
data () {
返回{
imgIndex: 0，
区块画布：空
imgList: [require(./assets/1.png )，
要求(./assets/3.png )，
要求(./assets/4.png )，
要求(./assets/5.png) ]，
内容： 滑动滑块，
isDown: false，//鼠标是否按下
btnX: 0，
imgX: 0
}
},
已安装(){
这个。imgindex=this。随机数(0，4)
文档。addevent侦听器( mousemove ，this.mouseMove)
this.imageCanvas()
},
方法：{
//生成随机数字
随机数(最小值，最大值){
回归数学。地板(数学。random()*(max-min)min)
},
//鼠标按下时
鼠标按下(e) {
this.isDown=true
this.btnX=e.clientX - this .$refs.btn.offsetLeft
},
//鼠标滑动时
鼠标移动(e) {
//滑块左端向右边移动的距离
设moveX=e.clientX - this.btnX
如果(this.isDown) {
//滑块滑动时不能超过的距离
如果（这个refs.btn.offsetLeft=259 this .$refs.btn.offsetLeft=0) {
这个参考文献。BTN。风格。left=` ${ moveX } px ` 1
这个。块状画布。风格。left=` $ { moveX-this。imgx } px ` 1
这个参考文献。BG。风格。width=` ${ moveX } px ` 1
}
}
},
//滑动中松开
mouseUp () {
让leftX=this .$refs.btn.offsetLeft
//方块的位置和缺失的位置重合允许左右2px的误差
如果(这个。imgx=leftX-1 this。imgx=leftX 1){
//滑动成功时的逻辑
这个参考文献。BTN。班级名单。添加(“BTN成功”)
this.isDown=false
}
//如果滑动失败，滑块自动回到左边
如果(this.isDown) {
这个. refs.btn.style.left=0
这个。块状画布。风格。left=`-$ {这个。imgx } px ` 1
这个. refs.bg.style.width=0
}
//开关原则
this.isDown=false
},
//画图
imageCanvas () {
这个。块画布=这个。块画布？this.blockCanvas.remove() : null
这个。块画布=这个。创建画布(300，150)
这个参考文献。验证。在(此之前插入。块帆布，这个.$refs.slideVerify)
设x=this.randomNumber(60，200)
让y=40
this.imgX=x
让c=这个refs.slideVerify
设bg=c.getContext(2d )
让img=这个refs.imgs
设bk=这个。块状画布。获取上下文(“2d”)
//在两块画布上都放上相同的图片
img.onload=()={
bg.drawImage(img，0，0)
bk.drawImage(img，0，0)
}
this.drawBlock(bg，x，y，“fill”)
this.drawBlock(bk，x，y， clip )
},
//画抠出来的方块
拉伸块(ctx，x，y，类型){
ctx.beginPath()
ctx.moveTo(x，y)
ctx.arc(x 42/2，y - 9 2，9，0.72 *数学。圆周率，2.26 *数学.)
ctx.lineTo(x 42，y)
ctx.arc(x 42 9 - 2，y 42/2，9，1.21 *数学。圆周率，2.78 *数学.)
ctx.lineTo(x 42，y 42)
ctx.lineTo(x，y 42)
ctx.arc(x 9 - 2，y 42/2，9 0.4，2.76 *数学。圆周率，1.24 *数学。圆周率，真)
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
//解决进入页面时不自动扣拼图样式的麻烦（有时需要鼠标点击后才会出现裁剪后的拼图)
这个。块状画布。风格。left=-$ { x } px
},
//刷新
刷新()>
//有时会出现点击刷新，随机数返回的数字和上次存储的一样，画布清空后但是填充时没有改变；所以当一样时，不会执行刷新操作
如果(这个。img指数==这个。randomnumber(0，4))-如果
返回错误的
}
此。清洁()
这一点. refs.btn.style.left=0
这一点. refs.bg.style.width=0
这一点参考文献。BTN。班级名单。删除(“BTN访问”).
此。isdn=false//鼠标是否按下
此。btnX=0 //鼠标点击的水平位置与滑块移动水平位置的差
this.imgX=0
this.imageCanvas("恢复")
这个。img指数=这个。randomnumber(0，4)
},
//清空-肉桂
清洁()
让cx2=这个.$参考文献。幻灯片验证。获取上下文(“2d”)中
cx2。clearrect(0.0、300、150)
},
//新建-肉桂
创建画布(宽度、高度)
const canvas=文档。创建元素(“画布”).
画布宽度=宽度
画布高度=身高。
画布。风格。位置=绝对
返回帆布
}
}
}
/脚本
操蛋的风格。验证[
位置：相对；
宽度：300像素
边距：0汽车；
}。幻灯片封套[
位置：相对；
宽度：300像素
高度：40px
}。锥齿轮启动[
背景：学员；
}。BG[
位置：绝对；
高度：40px
背景：#ccc
}。文本[
位置：绝对；
宽度：100%;
高度：40px
文字对齐：中心；
线路高度：40px
页边距：0;
/* z指数：1;*/
}。文本-成功[
颜色：白色；
z指数：2;
}。按钮
位置：绝对；
宽度：40px
高度：40px
z指数：1;
边界半径：5px
背景：rgb(143、145、148)；
文字对齐：中心；
字体大小：24px
颜色：白色；
盒影：0 0 1 px 1 px #fff
背景：#fff无重复中心URL( data:image/png；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
}。BTN成功
背景：#fff无重复中心URL( data:image/png；-伊甸园字幕组=-翻译：粒粒粒粒粒尘紫月猫姐风景校对：粒尘紫月猫姐风景校对：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘紫月猫姐时间轴：粒尘紫月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘月猫姐校对：粒尘月猫姐时间轴：粒尘月猫姐时间轴：粒尘
}。刷新[
光标：指针；
宽度：20像素
高度：20像素
位置：绝对；
z指数：1;
顶部：0;
右：10px
不透明：6;
背景：url(-什么/assets/ref . jpg’)无重复；
背景大小：封面；
}
/风格
完成效果图
滑动完成时
因为允许1px的差距，可以自己改
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。