主要使用@touchstart、 @touchmove、 @touchend
循环img列表
touchmove事件是避免长按滑动手机触发down事件
<div
v-for="(item, index) in imgList"
:key="index"
@touchstart="down(item)"
@touchmove="up"
@touchend="up"
>
<img :src="item" alt="" />
</div>
return{
time: null,
}...
// imgUrl是文件的路径 支持base64
down(imgUrl) {
this.time = setTimeout(() => {
// 这里写保存图片的方法
if (window.navigator.msSaveOrOpenBlob) {
// 如果浏览器支持msSaveOrOpenBlob方法(也就是使用IE浏览器的时候),那么调用该方法去下载图片
var bstr = atob(imgUrl.split(",")[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr]);
window.navigator.msSaveOrOpenBlob(blob, "img" + "." + "png");
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement("a");
a.href = imgUrl;
a.setAttribute("download", "img");
a.click();
}
}, 1000);
},
up() {
clearTimeout(this.time);
},