本文实例为大家分享了vue封装图片滑块验证组件的具体代码，供大家参考，具体内容如下
滑块验证组件整体不难，主要在于设置图片的样式问题，想要让背景图充满div，就需要滑块图片也跟随等比放大，效果与代码如下：
HTML：
<template> <section class="slider-section"> <div class="img-box"> <img :src="'data:image/png;base64,' sliderData.bigImg" class="bg-img" ref="bgImg" /> <img :src="'data:image/png;base64,' sliderData.smallImg" class="slider-img" ref="sliderImg" /> </div> <div class="slider-box"> <span class="slider-text">向右滑动滑块填充拼图</span> <div class="slider-icon" @mousedown="rangeMove">></div> </div> </section> </template>
JS：
<script>
export default {
props: ['sliderData'], // 父组件传入的滑块数据对象
watch: {
sliderData: { // 监听滑块数据变化，重置滑块位置
handler (newVal, oldVal) {
if (newVal) {
this.init()
}
},
deep: true
}
},
data () {
return {
disX: 0 // 滑块距离背景图左侧的位置
}
},
mounted () {
this.init()
},
methods: {
// 初始化滑块的位置
init () {
this.disX = 0 // 初始化滑块位置
let bigImg = new Image() // 创建背景图片
bigImg.src = "data:image/png;base64," this.sliderData.bigImg
bigImg.onload = () => {
let originWidth = bigImg.width // 获取原始背景图片的宽度
let widthRate = this.$refs.bgImg.width / originWidth // 背景图片渲染后的实际宽度/原始图片宽度
let smallImg = new Image() // 创建滑块图片
smallImg.src = "data:image/png;base64," this.sliderData.smallImg
this.$refs.sliderImg.src = 'data:image/png;base64,' this.sliderData.smallImg // 设置滑块图片地址
this.$refs.sliderImg.style.width = smallImg.width * widthRate 'px' // 设置滑块图片宽度
this.$refs.sliderImg.style.top = this.sliderData.smallY * this.$refs.bgImg.height 'px' // 设置滑块距离背景图顶部的距离
this.$refs.sliderImg.style.left = 0 // 设置滑块距离背景图左侧的距离
}
},
// 移动事件触发
rangeMove (e) {
let ele = e.target
let startX = e.clientX
let eleWidth = ele.offsetWidth
let parentWidth = ele.parentElement.offsetWidth
let MaxX = parentWidth - eleWidth
document.onmousemove = (e) => {
let endX = e.clientX
this.disX = endX - startX
this.$refs.sliderImg.style.left = this.disX 'px'
if (this.disX <= 0) {
this.disX = 0
this.$refs.sliderImg.style.left = 0
}
if (this.disX >= MaxX - eleWidth) {//减去滑块的宽度,体验效果更好
this.disX = MaxX
this.$refs.sliderImg.style.left = (parentWidth - this.$refs.sliderImg.width) 'px'
}
ele.style.transition = '.1s all'
ele.style.transform = 'translateX(' this.disX 'px)'
e.preventDefault()
}
document.onmouseup = () => {
this.$emit('submitPic', this.disX / parentWidth) // 停止滑动事件冒泡给父级
setTimeout(() => {
ele.style.transition = '.5s all'; // 初始化滑块位置
ele.style.transform = 'translateX(0)';
}, 200)
document.onmousemove = null
document.onmouseup = null
}
}
}
}
</script>CSS：
<style scoped lang="less">
.slider-section {
margin: 20px 0;
.img-box {
position: relative;
.bg-img {
width: 100%;
}
.slider-img {
position: absolute;
left: 0;
top: 0;
}
}
.slider-box {
margin-top: 20px;
background: #f7f9fa;
color: #666;
border: 1px solid #e4e7eb;
position: relative;
height: 30px;
width: 100%;
&:hover {
box-shadow: 0 0 3px #ccc;
}
.slider-text {
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.slider-icon {
width: 30px;
height: 30px;
background: #c8923a;
text-align: center;
font-size: 20px;
color: #fff;
box-shadow: 0 0 6px #ccc;
}
}
}
</style>注：使用的是mousedown、onmousemove 、onmouseup 事件，仅支持PC端，如果要在移动端使用，需要把这些事件改成touch等；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。