当前位置：首页 > VUE

vue实现滑动框

2026-01-16 07:15:23VUE

Vue 实现滑动框的方法

使用原生 CSS 和 Vue 事件

通过 Vue 的 v-on 指令绑定鼠标事件，结合 CSS 的 transform 实现滑动效果。

<template>
  <div class="slider-container">
    <div 
      class="slider"
      @mousedown="startDrag"
      @mousemove="onDrag"
      @mouseup="endDrag"
      @mouseleave="endDrag"
      :style="{ transform: `translateX(${position}px)` }"
    >
      滑动内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      position: 0,
      isDragging: false,
      startX: 0
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startX = e.clientX - this.position
    },
    onDrag(e) {
      if (!this.isDragging) return
      this.position = e.clientX - this.startX
    },
    endDrag() {
      this.isDragging = false
    }
  }
}
</script>

<style>
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.slider {
  width: 200px;
  height: 100px;
  background: #eee;
  cursor: grab;
  user-select: none;
}
</style>

使用第三方库 vue-draggable

对于更复杂的拖拽需求，可以使用 vue-draggable 库。

安装依赖：

vue实现滑动框

npm install vuedraggable

示例代码：

<template>
  <draggable 
    v-model="list"
    class="drag-area"
    @start="dragStart"
    @end="dragEnd"
  >
    <div v-for="item in list" :key="item.id" class="drag-item">
      {{ item.name }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    dragStart() {
      console.log('拖动开始')
    },
    dragEnd() {
      console.log('拖动结束')
    }
  }
}
</script>

<style>
.drag-area {
  width: 300px;
}
.drag-item {
  padding: 10px;
  margin: 5px;
  background: #f0f0f0;
  cursor: move;
}
</style>

实现触摸屏支持

对于移动端设备，需要添加触摸事件支持：

vue实现滑动框

<template>
  <div class="slider-container">
    <div 
      class="slider"
      @mousedown="startDrag"
      @touchstart="startDrag"
      @mousemove="onDrag"
      @touchmove="onDrag"
      @mouseup="endDrag"
      @touchend="endDrag"
      @mouseleave="endDrag"
      :style="{ transform: `translateX(${position}px)` }"
    >
      滑动内容
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    startDrag(e) {
      this.isDragging = true
      const clientX = e.clientX || e.touches[0].clientX
      this.startX = clientX - this.position
    },
    onDrag(e) {
      if (!this.isDragging) return
      const clientX = e.clientX || e.touches[0].clientX
      this.position = clientX - this.startX
      e.preventDefault()
    }
  }
}
</script>

添加边界限制

防止滑块滑出容器范围：

onDrag(e) {
  if (!this.isDragging) return
  const clientX = e.clientX || e.touches[0].clientX
  let newPosition = clientX - this.startX

  // 获取容器和滑块宽度
  const containerWidth = this.$el.offsetWidth
  const sliderWidth = this.$el.querySelector('.slider').offsetWidth

  // 设置边界
  const minPosition = 0
  const maxPosition = containerWidth - sliderWidth
  newPosition = Math.max(minPosition, Math.min(newPosition, maxPosition))

  this.position = newPosition
  e.preventDefault()
}

添加动画效果

使用 CSS 过渡使滑动更平滑：

.slider {
  transition: transform 0.2s ease;
}

当拖动结束时可以添加回弹效果：

endDrag() {
  this.isDragging = false

  // 如果滑块部分滑出，自动回弹
  const containerWidth = this.$el.offsetWidth
  const sliderWidth = this.$el.querySelector('.slider').offsetWidth

  if (this.position < 0) {
    this.position = 0
  } else if (this.position > containerWidth - sliderWidth) {
    this.position = containerWidth - sliderWidth
  }
}

标签: vue