当前位置：首页 > VUE

vue实现拼图验证

2026-03-08 15:54:22VUE

Vue 实现拼图验证的方法

拼图验证是一种常见的验证码形式，用户需要拖动拼图块到正确位置完成验证。以下是基于 Vue 的实现方法。

核心组件结构

使用 Vue 的单文件组件结构，包含验证区域和拼图块：

<template>
  <div class="puzzle-verify">
    <div class="puzzle-bg" ref="bg"></div>
    <div 
      class="puzzle-piece" 
      ref="piece"
      @mousedown="startDrag"
      @touchstart="startDrag"
    ></div>
    <div class="result">{{ resultText }}</div>
  </div>
</template>

初始化拼图位置

在 mounted 钩子中初始化拼图位置和背景：

data() {
  return {
    startX: 0,
    startY: 0,
    targetX: Math.floor(Math.random() * 200) + 50,
    targetY: Math.floor(Math.random() * 150) + 50,
    isDragging: false,
    resultText: ''
  }
},
mounted() {
  this.initPuzzle();
}

拼图初始化方法

methods: {
  initPuzzle() {
    const bg = this.$refs.bg;
    const piece = this.$refs.piece;

    // 设置拼图缺口位置
    bg.style.backgroundPosition = `-${this.targetX}px -${this.targetY}px`;

    // 初始化拼图块位置
    piece.style.left = '10px';
    piece.style.top = '10px';
  }
}

拖拽事件处理

实现鼠标/触摸拖拽逻辑：

startDrag(e) {
  this.isDragging = true;
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;

  this.startX = clientX - this.$refs.piece.offsetLeft;
  this.startY = clientY - this.$refs.piece.offsetTop;

  document.addEventListener('mousemove', this.onDrag);
  document.addEventListener('touchmove', this.onDrag);
  document.addEventListener('mouseup', this.stopDrag);
  document.addEventListener('touchend', this.stopDrag);
},

onDrag(e) {
  if (!this.isDragging) return;

  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;

  this.$refs.piece.style.left = `${clientX - this.startX}px`;
  this.$refs.piece.style.top = `${clientY - this.startY}px`;
},

stopDrag() {
  this.isDragging = false;
  this.verifyPosition();

  document.removeEventListener('mousemove', this.onDrag);
  document.removeEventListener('touchmove', this.onDrag);
  document.removeEventListener('mouseup', this.stopDrag);
  document.removeEventListener('touchend', this.stopDrag);
}

验证逻辑

检查拼图是否到达正确位置：

verifyPosition() {
  const piece = this.$refs.piece;
  const pieceRect = piece.getBoundingClientRect();
  const bgRect = this.$refs.bg.getBoundingClientRect();

  const offsetX = Math.abs(pieceRect.left - bgRect.left - this.targetX);
  const offsetY = Math.abs(pieceRect.top - bgRect.top - this.targetY);

  if (offsetX < 5 && offsetY < 5) {
    this.resultText = '验证成功';
    piece.style.backgroundColor = 'green';
  } else {
    this.resultText = '请将拼图拖到正确位置';
    piece.style.backgroundColor = '';
  }
}

样式设计

基础样式确保拼图可见：

vue实现拼图验证

.puzzle-verify {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #ddd;
}

.puzzle-bg {
  width: 100%;
  height: 100%;
  background-image: url('path/to/background.jpg');
  background-size: cover;
}

.puzzle-piece {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: move;
  border: 1px solid #333;
}

.result {
  margin-top: 10px;
  text-align: center;
}