vant-uploader上传组件添加长按保存图片
# 方案
1,先禁止原组件的预览大图功能,自己添加预览方法;
2,获取dom,添加长按手势,用定时器来模拟长按手势;
3,交互方法保存图片;
代码如下
//@click-preview
<Uploader
v-model="fileList3"
:before-read="onUploaderBefore"
:after-read="(file) => onAfterRead(file, 3)"
@delete="(file) => onUploaderBeforeDelete(file, 3)"
@click-preview="doorImagePreview"
:deletable="editor"
:max-count="editor ? 3 : fileList3.length"
image-fit="cover"
accept="image/*"
capture="camera"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
//长按定时器
const longPressTimer = ref(null);
const doorImagePreview = (file, detail) => {
nextTick(() => {
let aaa = document.getElementsByClassName("van-image-preview__swipe-item");
for (let i = 0; i < aaa.length; i++) {
let ddd = aaa[i].getElementsByClassName("van-image-preview__image");
if (ddd.length) {
let eee = ddd[0].childNodes;
if (eee.length) {
let imagepreview = eee[0];
imagepreview.ontouchstart = (event) => {
longPressTimer.value = setTimeout(function () {
console.log("进入长摁方法");
onLongPress(file.url);
}, 500); //这里设置定时器,定义长按500毫秒触发长按事件
return false;
};
imagepreview.ontouchmove = () => {
// clearTimeout(longPressTimer.value); //清除定时器
// if (longPressTimer.value != 0) {
// //这里写要执行的内容(如onclick事件)
// console.log("点击但未长按");
// }
return false;
};
imagepreview.ontouchend = () => {
clearTimeout(longPressTimer.value); //清除定时器
longPressTimer.value = null;
};
}
}
}
});
};
const onLongPress = (url) => {
console.log("长按方法", url);
//调用app保存图片方法
channels.saveImage(url, false);
setTimeout(() => {
Toast("图片保存到相册");
}, 1000);
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
上次更新: 2024/09/09, 15:16:31