vue项目使用AlloyFinger实现图片放大缩小旋转单击双击长按事件

最新推荐文章于 2024-09-29 09:19:54 发布

置顶 scarecrowll

最新推荐文章于 2024-09-29 09:19:54 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_41227106/article/details/107611854

版权

1、vue使用AlloyFinger,可以使用npm进行下载也可以直接下载AlloyFinger.js文件

使用npm下载如下

npm install AlloyFinger --save

在main.js中引入

import AlloyFinger from 'alloyfinger'

import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue'

Vue.use(AlloyFingerPlugin,{

  AlloyFinger

})

2、直接下载AlloyFinger.js,放在static 的js中，在需要使用的vue页面使用

import AlloyFinger from "../../static/js/alloyfinger";

let that = this;
      let element = document.getElementById("pic");
      this.af = new AlloyFinger(element, {
        rotate: function (evt) {
          console.log("实现旋转");
        },
        pinch: function (evt) {
          console.log("实现缩放");
        },
        pressMove: function (evt) {
          console.log("实现移动");
        },
        tap: function (evt) {
          console.log("单击");
          //点按触发
        },
        doubleTap: function (e) {
          console.log("双击");
          //双击屏幕触发
        },
        longTap: function (e) {
          console.log("长按");
          //长按屏幕750ms触发
        },
        swipe: function (e) {
          //e.direction代表滑动的方向
          console.log("swipe" + e.direction);
        },
      });

案例地址：

https://github.com/Scarecrowww/touchMove.git