vant中的uploader组件预览图片大图时添加长摁事件并获取当前url（dom）vant中的uploader组件预览图片大图时添加长摁事件并获取当前url（dom）

104 阅读 0 评论 69 点赞

我是靠谱客的博主聪明流沙，这篇文章主要介绍vant中的uploader组件预览图片大图时添加长摁事件并获取当前url（dom）vant中的uploader组件预览图片大图时添加长摁事件并获取当前url（dom），现在分享给大家，希望可以做个参考。

vant中的uploader组件预览图片大图时添加长摁事件并获取当前url（dom）

代码

下面展示一些 内联代码片。

复制代码

1
2
3
4
5
6
7
8
9
10
11
<van-uploader
class="w-full margin-b-s padding-16"
disabled
:deletable="false"
:show-upload="false"
v-model="form.imageList"
preview-size="0.95rem"
v-if="form.imageList.length"
@click-preview="onclickpreview"
/>

复制代码

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
onclickpreview(file,detail){
this.$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) => {
var self = this;
this.timeOutEvent = setTimeout(function () {
console.log("进入长摁方法")
self.longPress(event);
}, 500); //这里设置定时器，定义长按500毫秒触发长按事件
return false;
};
imagepreview.ontouchmove = () =>{
clearTimeout(this.timeOutEvent); //清除定时器
if (this.timeOutEvent != 0) {
//这里写要执行的内容（如onclick事件）
console.log("点击但未长按");
}
return false;
};
imagepreview.ontouchend = () => {
clearTimeout(this.timeOutEvent); //清除定时器
this.timeOutEvent = 0;
};
}
}
}
})
}

复制代码

1
2
3
4
5
6
7
8
9
10
	//真正长按后应该执行的内容
longPress(event) {
console.log(this.detail.imageList)
console.log(event.srcElement.getAttribute('src'));
fileToBase64Async(event.srcElement.getAttribute('src'),this);
this.timeOutEvent = 0;
//执行长按要执行的内容，如弹出菜单
console.log("长按");
}

复制代码

import Loading from '@/Loading/index'
import { Dialog } from 'vant';
export function fileToBase64Async(imgUrl,_this) {
Dialog.confirm({
title: _this.$t('save.img'),
message: '',
cancelButtonText: _this.$t('button.cancel'),
cancelButtonColor: '#007AFF',
confirmButtonText: _this.$t('button.apply'),
confirmButtonColor: '#007AFF'
}).then(() => {
Loading.show();
var Img = new Image(),
dataURL = '';
Img.src = imgUrl;
Img.setAttribute("crossOrigin", 'Anonymous')
Img.onload = function () {
var canvas = document.createElement("canvas"),
width = Img.width,
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
dataURL = canvas.toDataURL('image/jpeg');
let basearr = dataURL.split(';');
dataURL = basearr[1];
console.log(dataURL)
console.log('转换成功base64')
Loading.hide()
console.log(cordova)
cordova.exec(function (result) {
alert(JSON.stringify(result, null, 4));
},
function (error) {
console.log(error)
},
"WorkPlus_Image",
"saveImages",
[{
"watermark":{
"enabled": true,
"content": "test cc"
},
"url":dataURL
}]);
Loading.hide()
};
})
}

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
46
47
48
49
50
import Loading from '@/Loading/index'
import { Dialog } from 'vant';
export function fileToBase64Async(imgUrl,_this) {
Dialog.confirm({
title: _this.$t('save.img'),
message: '',
cancelButtonText: _this.$t('button.cancel'),
cancelButtonColor: '#007AFF',
confirmButtonText: _this.$t('button.apply'),
confirmButtonColor: '#007AFF'
}).then(() => {
Loading.show();
var Img = new Image(),
dataURL = '';
Img.src = imgUrl;
Img.setAttribute("crossOrigin", 'Anonymous')
Img.onload = function () {
var canvas = document.createElement("canvas"),
width = Img.width,
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
dataURL = canvas.toDataURL('image/jpeg');
let basearr = dataURL.split(';');
dataURL = basearr[1];
console.log(dataURL)
console.log('转换成功base64')
Loading.hide()
console.log(cordova)
cordova.exec(function (result) {
alert(JSON.stringify(result, null, 4));
},
function (error) {
console.log(error)
},
"WorkPlus_Image",
"saveImages",
[{
"watermark":{
"enabled": true,
"content": "test cc"
},
"url":dataURL
}]);
Loading.hide()
};
})
}