https://github.com/gauseen/vue-finger
Mobile gesture for vuejs
https://github.com/gauseen/vue-finger
alloyfinger finger tap touch vuejs
Last synced: 2 months ago
JSON representation
Mobile gesture for vuejs
- Host: GitHub
- URL: https://github.com/gauseen/vue-finger
- Owner: gauseen
- Created: 2019-06-06T08:12:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T01:52:53.000Z (about 1 year ago)
- Last Synced: 2025-03-17T23:15:26.941Z (3 months ago)
- Topics: alloyfinger, finger, tap, touch, vuejs
- Language: JavaScript
- Size: 377 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## vue-finger
> Vuejs 手势库，基于 [AlloyFinger][AlloyFinger] 开发
### 预览
[Live Demo][Demo]
移动端体验更佳
`PC` 端记得打开手机模拟器
### 安装
```sh
npm i -S @gauseen/vue-finger
# OR
yarn add @gauseen/vue-finger
```
### 使用
```js
// main.js
import Vue from 'vue'
import VueFinger from '../src/directives'
Vue.use(VueFinger)
```
```html
tap
export default {
name: 'demo',
methods: {
tap (evt) {
console.log('tap: ', evt)
},
},
}
```
### 浏览器导入
```html
```
### Api
#### 监听手势事件
可以用 `v-fg` 指令监听 `DOM` 手势事件，并在触发时运行 `JavaScript` 函数
#### `v-fg`
- **值：** `Function`
- **参数手势：** `touchStart | touchMove | touchEnd | touchCancel | tap | doubleTap | singleTap | longTap | rotate | pinch | pressMove | swipe | multipointStart | multipointEnd`
**示例:**
```html
doubleTap
swipe
rotate
rotate
export default {
name: 'demo',
methods: {
someHandle (evt) {
console.log('someHandle: ', evt)
},
},
}
```
[AlloyFinger]: https://github.com/AlloyTeam/AlloyFinger
[Demo]: https://gauseen.github.io/vue-finger