Nuxt 3中如何添加Vue3TouchEvents？触摸事件处理方案咨询

为什么你的代码报错？ #

Nuxt 3 基于 Vue 3，Vue 3 已经废弃了全局 Vue.use() 的用法，并且 Nuxt 3 有自己的插件注册机制，不能直接导入 Vue 实例调用 use。要正确集成 vue3-touch-events，需要按 Nuxt 3 的插件规范来配置。

正确集成 vue3-touch-events 的步骤 #

1. 安装依赖：

npm install vue3-touch-events
# 或
yarn add vue3-touch-events

2. 在项目的 plugins 目录下创建 touch-events.ts 文件，内容如下：

import { defineNuxtPlugin } from '#app'
import Vue3TouchEvents from 'vue3-touch-events'

export default defineNuxtPlugin((nuxtApp) => {
  // 通过 nuxtApp.vueApp 访问 Vue 应用实例
  nuxtApp.vueApp.use(Vue3TouchEvents)
})

3. 重启 Nuxt 服务，插件会自动注册，之后就能在组件中使用 vue3-touch-events 提供的指令（如 v-touch:tap、v-touch:swipe 等）。

无需第三方库的触摸事件处理方案 #

如果不想依赖第三方库，以下几种原生/自定义方式更轻量灵活：

1. 直接使用原生触摸事件 #

Vue 3 支持直接绑定原生触摸事件（touchstart、touchmove、touchend），在组件中直接使用即可：

<template>
  <div 
    @touchstart="onTouchStart"
    @touchmove="onTouchMove"
    @touchend="onTouchEnd"
    class="touch-demo"
  >
    触摸测试区域
  </div>
</template>

<script setup>
const onTouchStart = (e: TouchEvent) => {
  console.log('触摸开始', e.touches[0].clientX, e.touches[0].clientY)
}

const onTouchMove = (e: TouchEvent) => {
  console.log('触摸移动', e.touches[0].clientX, e.touches[0].clientY)
}

const onTouchEnd = () => {
  console.log('触摸结束')
}
</script>

<style scoped>
.touch-demo {
  width: 300px;
  height: 300px;
  background-color: #f5f5f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

2. 自定义全局指令复用触摸逻辑 #

如果需要在多个组件中复用触摸逻辑（比如长按、滑动），可以自定义 Nuxt 全局指令：
创建 plugins/touch-directives.ts：

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  // 自定义长按指令
  nuxtApp.vueApp.directive('longpress', {
    mounted(el, binding) {
      let timer: NodeJS.Timeout | null = null

      const startPress = (e: TouchEvent) => {
        timer = setTimeout(() => {
          binding.value() // 触发绑定的回调函数
        }, 1200) // 1.2秒后触发长按
      }

      const cancelPress = () => {
        if (timer) clearTimeout(timer)
      }

      el.addEventListener('touchstart', startPress)
      el.addEventListener('touchend', cancelPress)
      el.addEventListener('touchmove', cancelPress)
    }
  })
})

在组件中使用：

<template>
  <div v-longpress="handleLongPress" class="touch-demo">
    长按我触发
  </div>
</template>

<script setup>
const handleLongPress = () => {
  alert('长按事件触发！')
}
</script>

3. 用组合式函数封装触摸逻辑 #

将触摸相关逻辑封装成组合式函数，方便在多个组件中复用：
创建 composables/useTouch.ts：

import { ref } from 'vue'

export const useTouch = () => {
  const isTouching = ref(false)
  const touchPosition = ref({ x: 0, y: 0 })

  const handleTouchStart = (e: TouchEvent) => {
    isTouching.value = true
    const touch = e.touches[0]
    touchPosition.value = { x: touch.clientX, y: touch.clientY }
  }

  const handleTouchMove = (e: TouchEvent) => {
    const touch = e.touches[0]
    touchPosition.value = { x: touch.clientX, y: touch.clientY }
  }

  const handleTouchEnd = () => {
    isTouching.value = false
  }

  return {
    isTouching,
    touchPosition,
    handleTouchStart,
    handleTouchMove,
    handleTouchEnd
  }
}

在组件中使用：

<template>
  <div 
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    class="touch-demo"
  >
    <p>触摸状态：{{ isTouching ? '触摸中' : '未触摸' }}</p>
    <p>当前坐标：{{ touchPosition.x }}, {{ touchPosition.y }}</p>
  </div>
</template>

<script setup>
import { useTouch } from '~/composables/useTouch'

const { isTouching, touchPosition, handleTouchStart, handleTouchMove, handleTouchEnd } = useTouch()
</script>

内容的提问来源于stack exchange，提问作者bensiu