基于vue项目实现手机长按下载图片

关注

最新推荐文章于 2024-02-26 17:06:14 发布 · 670 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

vue H5 长按图片保存分享 h5端长按图片分享功能在移动h5开发中，经常会遇到需要长按图片可以保存的本地的需求。在标签中写入触摸事件 <div class="codeBox" @touchstart="touchStart()" @touchend="touchEnd()"></div> 然后在methods里面定义方法 touchEnd(){ //手指离开 clearTimeout(this.Loop); }, 阅读详情

//长按的几个事件

@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("长按");

},