vue实现拼图验证

vue实现拼图验证的方法

使用第三方库vue-puzzle-verification

安装vue-puzzle-verification库：

npm install vue-puzzle-verification --save

在Vue组件中引入并使用：

import VuePuzzleVerification from 'vue-puzzle-verification'

export default {
  components: {
    VuePuzzleVerification
  },
  methods: {
    handleSuccess() {
      console.log('验证成功')
    }
  }
}

模板中使用：

<vue-puzzle-verification @success="handleSuccess"></vue-puzzle-verification>

自定义实现拼图验证

创建Vue组件，包含以下功能：

<template>
  <div class="puzzle-container">
    <div class="puzzle-bg" :style="{backgroundImage: `url(${bgImage})`}"></div>
    <div 
      class="puzzle-piece" 
      :style="{left: `${pieceLeft}px`, backgroundImage: `url(${bgImage})`, backgroundPosition: `-${pieceLeft}px 0`}"
      @mousedown="startDrag"
    ></div>
    <div class="puzzle-slider">
      <div class="slider-track"></div>
      <div 
        class="slider-thumb" 
        :style="{left: `${sliderLeft}px`}"
        @mousedown="startSlide"
      ></div>
    </div>
  </div>
</template>

JavaScript逻辑部分：

export default {
  data() {
    return {
      bgImage: require('./assets/puzzle-bg.jpg'),
      pieceLeft: 0,
      sliderLeft: 0,
      isDragging: false,
      startX: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX
      document.addEventListener('mousemove', this.dragPiece)
      document.addEventListener('mouseup', this.stopDrag)
    },
    dragPiece(e) {
      if (!this.isDragging) return
      const moveX = e.clientX - this.startX
      this.pieceLeft = Math.max(0, Math.min(200, moveX))
      this.sliderLeft = this.pieceLeft
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.dragPiece)
      document.removeEventListener('mouseup', this.stopDrag)
      this.verifyPosition()
    },
    verifyPosition() {
      const threshold = 5
      const targetPosition = 150
      if (Math.abs(this.pieceLeft - targetPosition) < threshold) {
        this.$emit('success')
      } else {
        this.resetPuzzle()
      }
    },
    resetPuzzle() {
      this.pieceLeft = 0
      this.sliderLeft = 0
    }
  }
}

CSS样式部分：

.puzzle-container {
  position: relative;
  width: 300px;
  height: 200px;
}

.puzzle-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.puzzle-piece {
  position: absolute;
  top: 50px;
  width: 50px;
  height: 50px;
  cursor: move;
  background-size: 300px 200px;
}

.puzzle-slider {
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background: #f5f5f5;
}

.slider-track {
  height: 2px;
  background: #ccc;
  margin-top: 19px;
}

.slider-thumb {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 10px;
  background: #409eff;
  border-radius: 50%;
  cursor: pointer;
}

移动端适配

添加触摸事件支持：

methods: {
  startDrag(e) {
    const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
    this.isDragging = true
    this.startX = clientX
    document.addEventListener('mousemove', this.dragPiece)
    document.addEventListener('touchmove', this.dragPiece)
    document.addEventListener('mouseup', this.stopDrag)
    document.addEventListener('touchend', this.stopDrag)
  },
  dragPiece(e) {
    if (!this.isDragging) return
    const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
    const moveX = clientX - this.startX
    this.pieceLeft = Math.max(0, Math.min(200, moveX))
    this.sliderLeft = this.pieceLeft
  },
  stopDrag() {
    this.isDragging = false
    document.removeEventListener('mousemove', this.dragPiece)
    document.removeEventListener('touchmove', this.dragPiece)
    document.removeEventListener('mouseup', this.stopDrag)
    document.removeEventListener('touchend', this.stopDrag)
    this.verifyPosition()
  }
}

模板中添加触摸事件：

<div 
  class="puzzle-piece"
  @mousedown="startDrag"
  @touchstart="startDrag"
></div>
<div 
  class="slider-thumb"
  @mousedown="startSlide"
  @touchstart="startSlide"
></div>