vue滑动验证组件,vue 滑块验证
这篇文章主要为大家详细介绍了某视频剪辑软件封装图片滑块验证组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件封装图片滑块验证组件的具体代码，供大家参考，具体内容如下
滑块验证组件整体不难，主要在于设置图片的样式问题，想要让背景图充满div，就需要滑块图片也跟随等比放大，效果与代码如下：
HTML:
模板
section class=slider-section
div class=img-box
img:src= data:image/png；base64，滑块数据。bigimg class= BG-img ref= BG img /
img:src= data:image/png；base64，滑块数据。small img class= slider-img ref= slider img /
/div
div class=滑块框
span class=slider-text 向右滑动滑块填充拼图/span
div class= slider-icon @ mousedown= range move /div
/div
/部分
/模板
JS:
脚本
导出默认值{
道具：[sliderData]，//父组件传入的滑块数据对象
观察：{
sliderData: { //监听滑块数据变化，重置滑块位置
处理程序(新瓦尔，旧瓦尔){
if (newVal) {
this.init()
}
},
深：真的
}
},
data () {
返回{
disX: 0 //滑块距离背景图左侧的位置
}
},
已安装(){
this.init()
},
方法：{
//初始化滑块的位置
init () {
this.disX=0 //初始化滑块位置
let bigImg=new Image() //创建背景图片
bigimg。src= data:image/png；base64， this.sliderData.bigImg
bigImg.onload=()={
let originWidth=bigImg.width //获取原始背景图片的宽度
让宽度比率=this .$参考文献。华大基因mg。宽度/原点宽度//背景图片渲染后的实际宽度/原始图片宽度
let smallImg=new Image() //创建滑块图片
小img。src= data:image/png；base64， this.sliderData.smallImg
这个参考文献。滑动rimg。src= data:image/png；base64， this.sliderData.smallImg //设置滑块图片地址
这个参考文献。滑动rimg。风格。宽度=小img。宽度*宽度比率 px //设置滑块图片宽度
这个参考文献。滑动rimg。风格。top=这个。滑块数据。小*这个.$refs.bgImg.height px //设置滑块距离背景图顶部的距离
这个. refs $ slide rimg . style . left=0//设置滑块距离背景图左侧的距离
}
},
//移动事件触发
范围移动(e) {
让ele=e .目标
设startX=e.clientX
设eleWidth=ele.offsetWidth
设父宽度=ele。父元素。偏移距离
设MaxX=parentWidth - eleWidth
document.onmousemove=(e)={
设endX=e.clientX
this.disX=endX - startX
这个参考文献。滑动rimg。风格。左=这个。disx px
if (this.disX=0) {
this.disX=0
这个. refs.sliderImg.style.left=0
}
if (this.disX=MaxX - eleWidth) {//减去滑块的宽度，体验效果更好
this.disX=MaxX
这个参考文献。滑动rimg。风格。left=(父宽度-this .$refs.sliderImg.width) px
}
ele.style.transition= .1s all
ele。风格。transform= translate x( this。disx px)
预防默认()
}
document.onmouseup=()={
这个. emit(submitPic ，this.disX/parentWidth) //停止滑动事件冒泡给父级
setTimeout(()={
ele。风格。过渡="。5s全部”；//初始化滑块位置
ele。风格。transform= translate x(0)；
}, 200)
document.onmousemove=null
document.onmouseup=null
}
}
}
}
/脚本
CSS:
样式范围语言=少。滑块部分{
边距：20px 0；img-box {
位置：相对；血糖-img {
宽度：100%;
}。滑块-img {
位置：绝对；
左：0;
top:0；
}
}。滑块框{
边距-顶部：20px
背景：# f7f 9 fa
颜色：# 666;
边框：1px实心# e4e 7 EB
位置：相对；
高度：30px
宽度：100%;
：悬停{
盒影：0 0 3px # ccc
}。滑块-文本{
字体大小：14px
位置：绝对；
top:50%；
左：50%；
transform: translate(-50%，-50%)；
}。滑块图标{
宽度：30px
高度：30px
背景：# c8923a
文本对齐：居中；
字体大小：20px
颜色：# fff
盒影：0 0 6px # ccc
}
}
}
/风格
注意：使用mousedown、onmousemove、onmouseup事件，只支持PC端。如果想在移动端使用它们，需要把这些事件改成touch等。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。