vue实现滑动解锁

vue实现滑动解锁功能

滑动解锁是一种常见的交互方式，通常用于验证用户操作。以下是基于Vue实现滑动解锁的几种方法：

使用原生Vue实现

创建滑动解锁组件需要处理触摸事件和滑动逻辑：

<template>
  <div class="slider-container">
    <div class="slider-track">
      <div 
        class="slider-thumb"
        :style="{ left: thumbPosition + 'px' }"
        @mousedown="startDrag"
        @touchstart="startDrag"
      ></div>
    </div>
    <div class="slider-text">{{ isUnlocked ? '解锁成功' : '滑动解锁' }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      startX: 0,
      thumbPosition: 0,
      maxPosition: 300,
      isUnlocked: false
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('touchmove', this.onDrag, { passive: false })
      document.addEventListener('mouseup', this.stopDrag)
      document.addEventListener('touchend', this.stopDrag)
    },
    onDrag(e) {
      if (!this.isDragging) return
      e.preventDefault()

      const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX
      const moveX = clientX - this.startX

      this.thumbPosition = Math.min(
        Math.max(0, moveX),
        this.maxPosition
      )

      if (this.thumbPosition === this.maxPosition) {
        this.isUnlocked = true
        this.stopDrag()
      }
    },
    stopDrag() {
      this.isDragging = false
      if (!this.isUnlocked) {
        this.thumbPosition = 0
      }
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('touchmove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
      document.removeEventListener('touchend', this.stopDrag)
    }
  }
}
</script>

<style>
.slider-container {
  width: 350px;
  margin: 20px auto;
}
.slider-track {
  height: 40px;
  background: #eee;
  border-radius: 20px;
  position: relative;
}
.slider-thumb {
  width: 40px;
  height: 40px;
  background: #42b983;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}
.slider-text {
  text-align: center;
  margin-top: 10px;
}
</style>

使用第三方库vue-drag-drop

安装vue-drag-drop库：

npm install vue-drag-drop

实现代码：

<template>
  <div class="slider-wrapper">
    <div class="slider-track" ref="track">
      <div 
        class="slider-thumb"
        v-draggable="dragOptions"
        :style="{ left: thumbPosition + 'px' }"
      ></div>
    </div>
    <div class="slider-text">{{ isUnlocked ? '验证通过' : '请滑动滑块' }}</div>
  </div>
</template>

<script>
import { draggable } from 'vue-drag-drop'

export default {
  directives: { draggable },
  data() {
    return {
      thumbPosition: 0,
      maxPosition: 300,
      isUnlocked: false,
      dragOptions: {
        onDrag: this.handleDrag,
        onEnd: this.handleDragEnd
      }
    }
  },
  methods: {
    handleDrag({ positionDiff }) {
      this.thumbPosition = Math.min(
        Math.max(0, this.thumbPosition + positionDiff.left),
        this.maxPosition
      )
    },
    handleDragEnd() {
      if (this.thumbPosition === this.maxPosition) {
        this.isUnlocked = true
      } else {
        this.thumbPosition = 0
      }
    }
  }
}
</script>

实现进阶功能

1. 添加动画效果

   .slider-thumb {
   transition: left 0.3s ease-out;
   }

2. 添加验证回调

   

   props: {
   onSuccess: {
    type: Function,
    default: () => {}
   }
   },
   methods: {
   handleDragEnd() {
    if (this.thumbPosition === this.maxPosition) {
      this.isUnlocked = true
      this.$emit('success')
      this.onSuccess()
    }
   }
   }

3. 重置功能

   methods: {
   reset() {
    this.thumbPosition = 0
    this.isUnlocked = false
   }
   }

移动端优化

1. 添加touch事件支持

   mounted() {
   this.$refs.track.addEventListener('touchmove', this.preventScroll, { passive: false })
   },
   methods: {
   preventScroll(e) {
    if (this.isDragging) {
      e.preventDefault()
    }
   }
   }

2. 响应式设计

   @media (max-width: 768px) {
   .slider-container {
    width: 90%;
   }
   .slider-track {
    height: 35px;
   }
   .slider-thumb {
    width: 35px;
    height: 35px;
   }
   }

这些实现方式可以根据具体需求进行调整和扩展，创建出符合项目风格的滑动解锁组件。