基于vue项目实现手机长按下载图片_vue 图片长按下载-CSDN博客

本文介绍了如何在Vue.js项目中实现手机端图片的长按下载功能。通过监听touchstart、touchmove和touchend事件，结合setTimeout实现长按延迟触发。当长按达到指定时间后，创建并点击a标签来触发下载。同时，处理了手指移动和短点击的情况，确保只有长按时才会执行下载操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//长按的几个事件

@touchstart.native="gtouchstart(file)"

@touchmove.native="gtouchmove()"

@touchend.native="showDeleteButton(file)"

//手机上操作才可以看见下载

download(href, name) {

debugger

let eleLink = document.createElement("a");

eleLink.download = name;

eleLink.href = href;

eleLink.click();

eleLink.remove();

},

//长按事件（起始）

gtouchstart(item) {

var self = this;

this.timeOutEvent = setTimeout(function() {

self.longPress(item);

}, 500); //这里设置定时器，定义长按500毫秒触发长按事件

return false;

},

//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件

showDeleteButton(item) {

clearTimeout(this.timeOutEvent); //清除定时器

if (this.timeOutEvent != 0) {

//这里写要执行的内容（如onclick事件）

console.log("点击但未长按");

}

return false;

},

//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按

gtouchmove() {

clearTimeout(this.timeOutEvent); //清除定时器

this.timeOutEvent = 0;

},

//真正长按后应该执行的内容

longPress(val) {

console.log(val);

let _this = this;

this.timeOutEvent = 0;

_this.download(this.downloadFileServer + val.fSrc, "imgname");

//this.downloadFileServer + val.fSrc：路径

// debugger;

console.log("长按");

},