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等；