当前位置：首页 > VUE

vue实现移动显示

2026-03-29 09:48:38VUE

Vue 实现移动显示

在 Vue 中实现移动显示功能通常涉及监听触摸事件或鼠标事件，动态更新元素的位置。以下是几种常见实现方式：

使用 `v-touch` 指令（需安装 `vue-touch` 库）

安装 vue-touch 库后，可以通过指令监听触摸事件：

npm install vue-touch@next

注册插件并绑定事件：

import Vue from 'vue'
import VueTouch from 'vue-touch'

Vue.use(VueTouch, { name: 'v-touch' })

export default {
  methods: {
    handlePan(event) {
      // 通过 event.deltaX 和 event.deltaY 获取移动偏移量
      this.x += event.deltaX
      this.y += event.deltaY
    }
  }
}

模板中使用指令：

vue实现移动显示

<v-touch
  @pan="handlePan"
  tag="div"
  class="draggable"
  :style="{ transform: `translate(${x}px, ${y}px)` }"
>
  可拖拽元素
</v-touch>

原生事件实现

通过 @mousedown、@mousemove 和 @mouseup 实现基础拖拽：

export default {
  data() {
    return {
      isDragging: false,
      position: { x: 0, y: 0 },
      startPos: { x: 0, y: 0 }
    }
  },
  methods: {
    startDrag(e) {
      this.isDragging = true
      this.startPos = {
        x: e.clientX - this.position.x,
        y: e.clientY - this.position.y
      }
      document.addEventListener('mousemove', this.onDrag)
      document.addEventListener('mouseup', this.endDrag)
    },
    onDrag(e) {
      if (!this.isDragging) return
      this.position = {
        x: e.clientX - this.startPos.x,
        y: e.clientY - this.startPos.y
      }
    },
    endDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.onDrag)
      document.removeEventListener('mouseup', this.endDrag)
    }
  }
}

模板部分：

vue实现移动显示

<div
  @mousedown="startDrag"
  :style="{
    position: 'absolute',
    left: position.x + 'px',
    top: position.y + 'px'
  }"
>
  拖拽元素
</div>

移动端适配

针对触摸事件需添加 @touchstart、@touchmove 和 @touchend：

methods: {
  startDrag(e) {
    const clientX = e.touches ? e.touches[0].clientX : e.clientX
    const clientY = e.touches ? e.touches[0].clientY : e.clientY
    // 其余逻辑与鼠标事件相同
  }
}

使用 CSS Transform

推荐使用 transform 而非直接修改 top/left 以获得更好的性能：

:style="{ transform: `translate3d(${position.x}px, ${position.y}px, 0)` }"

边界限制

添加移动范围限制：

onDrag(e) {
  const maxX = window.innerWidth - this.$el.offsetWidth
  const maxY = window.innerHeight - this.$el.offsetHeight
  this.position = {
    x: Math.min(maxX, Math.max(0, e.clientX - this.startPos.x)),
    y: Math.min(maxY, Math.max(0, e.clientY - this.startPos.y))
  }
}

标签: vue