1. v-finger-mk42
Use AlloyFinger v0.1.10
v-finger-mk42
Package: v-finger-mk42
Created by: SSShooter
Last modified: Sat, 02 Mar 2024 03:58:26 GMT
Version: 3.0.1
License: ISC
Downloads: 1,419
Repository: https://github.com/SSShooter/v-finger

Install

npm install v-finger-mk42
yarn add v-finger-mk42

legacy

Use AlloyFinger v0.1.10

  • 1.0.4 add transform.js
  • 1.0.5 fixed "toJSON" is not defined
  • 1.0.6 performance element cache
  • 1.0.7 use babel
  • 2.0.3 compatible with PC
  • 2.0.4 compatible with macOS

3.0

  • 3.0.0 适配 Vue 3,Vue 2 代码在 legacy 分支
  • 3.0.0 后不运行 rollup 打包,直接指定 lib/index 运行

v-finger

 <img
  style="position:absolute;width: 100%;"
  v-transform
  v-finger:pinch="handlePinch"
  v-finger:doubleTap="handleDoubleTap"
  v-finger:multipointStart="handleMultipointStart"
  v-finger:pressMove="handlePressMove"
  v-finger:touchEnd="handleTouchEnd"
  :src="src"
/>
 ...
handleXXX(e, el) {
    console.log('event',e)
    console.log('element',el)
    console.log("for pinch" + e.zoom)
    console.log("for pressMove" + e.deltaX + ' ' + e.deltaY);
    console.log("for swipe" + e.direction);
}
...

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin