vue 长按保存图片事件

vue没有封装真正的长按事件，所以我们这里用@touchstart，@touchmove，@touchend事件来代替

<div class="friend" @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="showDeleteButton()">
	<canvas id="myCanvas" width="300" height="450"></canvas>
</div>

直接上代码，中间这里是用的是保存canvas的方法 

let timeOutEvent = null //定时器 
	//长按事件设置定时器
	let gtouchstart = () => {
		timeOutEvent = setTimeout(() => {
			longPress()
		}, 700)
	}

	//手释放，如果在200毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
	let showDeleteButton = () => {
		clearTimeout(timeOutEvent); //清除定时器
		if (timeOutEvent != 0) {
			timeOutEvent = 0;
		}
		return false;
	}
	//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
	let gtouchmove = () => {
		clearTimeout(timeOutEvent); //清除定时器
		timeOutEvent = 0
	}
	//真正长按后应该执行的内容
	let longPress = () => {
		timeOutEvent = 0;
		saveAsLocalImage();
	}