在vue項目中實現(xiàn)拖拽挣跋，縮放三圆，雙擊，長按等功能
使用的是騰訊開發(fā)的AlloyFinger插件
- 1.下載
npm install alloyfinger
// or
yarn add alloyfinger
- 2.組件中使用
<template>
<div class="box">
<img
src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00011-2072.jpg"
ref="pic"
:style="{'transform': 'translate('+ posX + 'px,' + posY + 'px) translateZ(0px) scale(' + dis + ') rotate(' + angle + 'deg)'}"
/>
</div>
</template>
<script>
import AlloyFinger from 'alloyfinger';
export default {
data() {
return {
posX: 0,
posY: 0,
dis: 1,
angle: 0,}
},
mounted() {
this.getData();
},
methods: {
getData() {
let that = this;
let pic= this.$refs.pic;
this.af = new AlloyFinger(pic, {
rotate: function (evt) {
console.log("實現(xiàn)旋轉(zhuǎn)");
that.angle += evt.angle;
},
pinch: function (evt) {
console.log("實現(xiàn)縮放");
that.dis = evt.zoom;
},
pressMove: function (evt) {
console.log("實現(xiàn)移動");
that.posX += evt.deltaX;
that.posY += evt.deltaY;
},
tap: function (evt) {
console.log("單擊");
//點按觸發(fā)
},
doubleTap: function (e) {
console.log("雙擊");
//雙擊屏幕觸發(fā)
},
longTap: function (e) {
console.log("長按");
//長按屏幕750ms觸發(fā)
},
swipe: function (e) {
//e.direction代表滑動的方向
console.log("swipe" + e.direction);
},
});
}
}
}
</script>
