vue实现滑动解锁

Vue 滑动解锁实现方法

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

使用第三方库

vue-drag-slider 是一个专门用于实现滑动解锁的 Vue 组件：

安装：

npm install vue-drag-slider

使用示例：

<template>
  <vue-drag-slider
    v-model="sliderValue"
    :min="0"
    :max="100"
    @drag-end="onDragEnd"
  />
</template>

<script>
import VueDragSlider from 'vue-drag-slider'

export default {
  components: {
    VueDragSlider
  },
  data() {
    return {
      sliderValue: 0
    }
  },
  methods: {
    onDragEnd() {
      if (this.sliderValue === 100) {
        // 解锁成功
      }
    }
  }
}
</script>

自定义实现方案

基于原生 HTML5 拖拽事件和触摸事件的自定义实现：

<template>
  <div class="slider-container">
    <div class="slider-track">
      <div 
        class="slider-thumb"
        @mousedown="startDrag"
        @touchstart="startDrag"
      ></div>
    </div>
    <div class="slider-text">{{ dragText }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDragging: false,
      currentPosition: 0,
      maxPosition: 300,
      dragText: '滑动解锁'
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      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 containerRect = this.$el.querySelector('.slider-track').getBoundingClientRect()
      let newPosition = clientX - containerRect.left

      newPosition = Math.max(0, Math.min(newPosition, this.maxPosition))
      this.currentPosition = newPosition

      this.$el.querySelector('.slider-thumb').style.transform = `translateX(${newPosition}px)`

      if (newPosition >= this.maxPosition - 10) {
        this.dragText = '解锁成功'
        this.stopDrag()
      }
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('touchmove', this.onDrag)
      document.removeEventListener('mouseup', this.stopDrag)
      document.removeEventListener('touchend', this.stopDrag)

      if (this.currentPosition < this.maxPosition - 10) {
        this.currentPosition = 0
        this.$el.querySelector('.slider-thumb').style.transform = 'translateX(0)'
      }
    }
  }
}
</script>

<style>
.slider-container {
  width: 300px;
  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;
  left: 0;
  top: 0;
  cursor: pointer;
}

.slider-text {
  text-align: center;
  margin-top: 10px;
  color: #666;
}
</style>

使用 Vue 指令实现

创建自定义指令处理拖拽逻辑：

Vue.directive('drag-slider', {
  bind(el, binding, vnode) {
    let isDragging = false
    let startX = 0
    let currentX = 0
    const maxWidth = el.offsetWidth - 40

    const thumb = el.querySelector('.slider-thumb')

    const startDrag = (e) => {
      isDragging = true
      startX = e.clientX || e.touches[0].clientX
      document.addEventListener('mousemove', onDrag)
      document.addEventListener('touchmove', onDrag)
      document.addEventListener('mouseup', stopDrag)
      document.addEventListener('touchend', stopDrag)
    }

    const onDrag = (e) => {
      if (!isDragging) return

      const clientX = e.clientX || e.touches[0].clientX
      currentX = clientX - startX
      currentX = Math.max(0, Math.min(currentX, maxWidth))

      thumb.style.transform = `translateX(${currentX}px)`

      if (currentX >= maxWidth - 5) {
        binding.value()
        stopDrag()
      }
    }

    const stopDrag = () => {
      isDragging = false
      document.removeEventListener('mousemove', onDrag)
      document.removeEventListener('touchmove', onDrag)
      document.removeEventListener('mouseup', stopDrag)
      document.removeEventListener('touchend', stopDrag)

      if (currentX < maxWidth - 5) {
        currentX = 0
        thumb.style.transform = 'translateX(0)'
      }
    }

    thumb.addEventListener('mousedown', startDrag)
    thumb.addEventListener('touchstart', startDrag)
  }
})

使用指令：

<template>
  <div v-drag-slider="onUnlock" class="slider-container">
    <div class="slider-track">
      <div class="slider-thumb"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onUnlock() {
      console.log('解锁成功')
    }
  }
}
</script>

这些方法提供了不同复杂度的实现方案，可以根据项目需求选择合适的实现方式。第三方库方案最快捷，自定义实现更灵活可控。