如果想要在自己的 web 应用中添加 touch 事件，可以使用 Vue-Touchjs 这个 npm 包。这个包提供了一些非常方便的指令和组件，使得你可以在你的 Vue 应用中轻松添加 touch 事件。本文将介绍如何在你的 Vue 应用中使用 Vue-Touchjs。
安装
可以通过 npm 安装 Vue-Touchjs.
npm install vue-touchjs
安装完成后，可以将 Vue-Touchjs 初始化到你的 vue 实例中。
import Vue from 'vue' import VueTouch from 'vue-touchjs' Vue.use(VueTouch)
用法
指令
Vue-Touchjs 提供了 v-touch:start 和 v-touch:end 指令用于开始和结束 touch 事件。
<div v-touch:start="handleTouchStart" v-touch:end="handleTouchEnd"></div>
-- -------------------- ---- -------
------ ------- -
-------- -
---------------- -- -
------------------ -------
--
-------------- -- -
------------------ -----
-
-
-组件
Vue-Touchjs 提供了 v-touchable 组件，使得在元素上添加 touch 事件变得更加简单。
-- -------------------- ---- -------
----------
------------ -------------------- -----------------
-----
----- ---
------
--------------
-----------
--------
------ - --------- - ---- -------------
------ ------- -
----------- -
---------
--
-------- -
----------- -- -
------------------ -------
--
--------- -- -
------------------ -----
-
-
-
---------可拖动元素
Vue-Touchjs 还提供了一个 v-draggable 指令，使得元素可以通过 touch 事件被拖动。
<div v-draggable></div>
指令参数
所有指令都可以接受以下参数。
<div v-touch:start="{ threshold: 10, passive: true }"></div>threshold- 最小拖动距离。默认值为 20。passive- 是否在 touchstart 事件中调用 preventDefault。默认值为 false。
组件参数
所有组件都可以接受以下参数。
<v-touchable tag="button" class="btn" @start="handleStart"></v-touchable>
tag- 组件的 html 标签。默认值为div。class- 组件的 css 类。默认值为v-touchable。
总结
在本文中，我们介绍了如何在 Vue 应用中使用 Vue-Touchjs。Vue-Touchjs 提供了一些非常方便的指令和组件，使得在 Vue 应用中添加 touch 事件变得更加容易。如果你正在开发一个需要 touch 事件的 web 应用，那么 Vue-Touchjs 绝对是一个值得尝试的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68059