vue hammer.js
威汉锤 (vue-hammer)
Hammer.js wrapper for Vue to support some operation in the mobile.
Vue的Hammer.js包装器支持移动设备中的某些操作。
This is a directive wrapper for Hammer.js 2.x. And this repo'inspiration is from v-touch.
这是Hammer.js 2.x的指令包装。 而这种回购的灵感来自v-touch。
View Documentation 查看文档 Download Source 下载源安装 (Install)
This plugin supports Vue >= 2.0.
该插件支持Vue> = 2.0。
npm (npm)
Available through npm as vue2-hammer
.
通过npm作为vue2-hammer
可用。
npm install vue2-hammer
import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)
用法 (Usage)
使用v-hammer
指令 (Using the v-hammer
directive)
<a v-hammer:tap="onTap">Tap me!</a>
<div v-hammer:swipe.left="onSwipeLeft">Swipe me!</div>
配置识别器选项 (Configuring Recognizer Options)
There are two ways to customize recognizer options such as direction
and threshold
. The first one is setting global options:
有两种方法可以自定义识别器选项,例如direction
和threshold
。 第一个是设置全局选项:
// change the threshold for all swipe recognizers
VueHammer.config.swipe = {
threshold: 200
}
<a v-hammer:doubletap="onDoubleTap"></a>
支持的手势和方向 (Supported gestures and directions)
手势 (gestures)
tap, pan, pinch, press, rotate, swipe, doubletap
点击,平移,捏,按,旋转,轻扫,双击
指示 (directions)
up, down, left, right, horizontal, vertical, all
上,下,左,右,水平,垂直,全部
注意 (Note)
Users can use both the gesture and the direction like v-hammer:swipe.left
. But if your combination is not exist in the hammer, it is not support.
用户可以使用手势和方向,例如v-hammer:swipe.left
。 但是,如果您的组合在锤子中不存在,则不支持。
运行示例 (Run the Example)
Run
yarn
ornpm i
运行
yarn
或npm i
Run
yarn build
ornpm run build
运行
yarn build
或npm run build
Open the index.html in the example directory.
在示例目录中打开index.html。
翻译自: https://vuejsexamples/hammer-js-wrapper-for-vue-2-x-to-support-mobile-touch/
vue hammer.js
更多推荐
vue hammer.js_Vue 2.x的Hammer.js包装器支持移动触摸
发布评论