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 or npm i

    运行yarn或npm i

  • Run yarn build or npm 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包装器支持移动触摸