百科.dev
全部条目在线工具AI 编程趋势榜开源项目技术资讯提交条目
登录
< 返回工具列表
V

vue-touch

> 编程语言
开源

Hammer.js 的 Vue.js 封装

2.7K stars0 点赞1 次浏览
访问官网GitHub

工具介绍

Hammer.js 的 Vue.js 封装

此插件已弃用,不再维护。

vue-touch

适用于 Vue.js 的触摸事件插件。此插件尚不支持 Vue 2.0。

这是 Hammer.js 2.0 的指令封装。

安装

此分支仅兼容 Vue 1.0。如需 Vue 2.0 兼容的重写版本,请参阅 next 分支

CommonJS

  • 可通过 npm 以 vue-touch 名称获取。
javascript
  var VueTouch = require('vue-touch')
  Vue.use(VueTouch)

直接引入

  • 当您已全局引入 Vue 和 Hammer.js 时,也可以使用 <script> 标签直接引入。它会自动安装自身,并添加全局的 VueTouch。

用法

使用 v-touch 指令

xml
<a v-touch:tap="onTap">Tap me!</a>

配置识别器选项

有两种方式可以自定义识别器选项,例如 direction 和 threshold。第一种是设置全局选项:

javascript
// change the threshold for all swipe recognizers
VueTouch.config.swipe = {
  threshold: 200
}

或者,你可以使用 v-touch-options 指令来配置特定元素上的行为:

xml

<a
  v-touch:pan="onPan"
  v-touch-options:pan="{ direction: 'horizontal', threshold: 100 }">
</a>

注册自定义事件

javascript
// example registering a custom doubletap event.
// the `type` indicates the base recognizer to use from Hammer
// all other options are Hammer recognizer options.
VueTouch.registerCustomEvent('doubletap', {
  type: 'tap',
  taps: 2
})
xml

有关所有可用事件,请参阅 Hammer.js 文档。

请参阅 /example 查看多事件演示。要构建它,请运行 npm install && npm run build。

许可证

MIT

Issues· 0 开放

查看全部 Issues在 GitHub 打开

暂无开放 Issues,或尚未同步最近议题。

> 标签

JavaScript

暂无评论,来聊聊你的看法吧

> 工具信息

发布日期2026年8月1日
最后更新2026年9月17日
分类编程语言
定价开源

> 相关工具

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言