说到长按保存图片,我们一定能想到touch事件,那么此时我们就需要用到touchstart、touchend、touchmove。
下面我分别使用Vue和MUI进行代码解析
Vue:
首先我们需要给标签绑定这三个事件
<img class="saveImg" src="图片途径" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
其次是我们的定时器,我们需要控制长按的时间,一般不会超过一秒钟
data(){
return{
time:""
}
}
touchstart(e){
this.time = setTimeout(() => {
var imgUrl = e.target.src
//此处是调用的APP得方法来保存图片,正常的H5项目是无法保存图片,除非我们项目创建时是移动APP项目
saveWxTimeLine1(imgUrl)
},1000)
}
结束及移除长按事件
touchend(){
clearTimeout(this.time)
},
touchmove(){
clearTimeout(this.time)
}
MUI:
<img class="saveImg" src="图片途径">
首先我们需要在mui.init()初始化时打开MUI的tap属性。
mui.init({
gestureConfig: {
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false,为true时是开启长按保存图片功能
swipe: true, //默认为true
drag: true, //默认为true
hold:true,//默认为false,不监听
release:false//默认为false,不监听
}
})
此时我们需要监听dom是否发起了longtap长按请求:
$(".saveImg").on("longtap",function(){
var imgUrl = $(this).attr('src')
//调用APP保存图片方法
saveWxTimeline1(imgUrl)
})
如上长按保存图片完成。