源码搜藏网

本文实例为大家分享了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等；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。