如何使用Vue处理touchEvents？

Question

是否可以在没有外部库的情况下使用 Vue3 处理 touchEvents？

我的需要是可以通过触摸移动元素（拖放到另一个地方）。元素本身是使用 v-for 渲染的。我实现了鼠标控制，没有任何问题，但是触摸控制却卡住了一天！

我只找到了一个库： https: //github.com/robinrodricks/vue3-touch-events

但我真的不明白我必须在哪里放置 UDM 模块以及如何执行这样的安装步骤：“您需要包含此插件的 UMD 脚本，并且不需要向 vue.js 注册此插件。”

我不敢相信像 Vue3 这样流行的框架没有原生触摸处理程序，所以我想寻求建议。

Answer 1

Vue 原生支持触摸事件，就像在 JavaScript 中一样。但是拖动或滑动功能，您需要自己构建，或者使用第三方插件（例如hammer.js）。

您可以使用与鼠标向上/向下类似的方式使用触摸事件。例如：

<MyComponent
  @mousedown="startDrag(item)"
  @mouseup="endDrag(item)"
  @mousemove="startDrag(item)"
  @touchstart="startDrag(item)"
  @touchend="endDrag(item)"
  @touchmove="endDrag(item)"        
/>