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

 //长按的几个事件

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

    },