npm install --save alloyfinger
<div :class='["mapcontent", currMap.name]'
ref="pic"
:style="{
transform:
'translate(' +
posX +
'px,' +
posY +
'px) translateZ(0px) scale(' +
dis +
')',
}">
...
</div>
import AlloyFinger from "alloyfinger";
...
data() {
return {
posX: 0,
posY: 0,
dis: 1
};
},
...
mounted(){
this.initControl();
},
methods: {
initControl() {
let that = this;
let pic = this.$refs.pic;// 要操作的div
this.af = new AlloyFinger(pic, {
// rotate: function (evt) {
// console.log("实现旋转");
// that.angle += evt.angle;
// },
pinch: function (evt) {
console.log("实现缩放");
that.dis = evt.zoom > 1 ? evt.zoom : 1;
},
pressMove: function (evt) {
console.log("实现移动");
console.log(evt);
// if(that.dis>1) {
that.posX += evt.deltaX;
that.posY += evt.deltaY;
// }
},
// 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);
// },
});
},
}