实现思路:
获取到富文本中所有的img标签,方面给图片添加类名方便后面取dom;获取所有的img类
给每个img绑定点击事件
利用数组的splice方法,将当前点击的图片放置数组的第一项
调用vant预览方法
import { showImagePreview } from 'vant';
<p v-html="content"></p>
// 点击图片预览
let content = ref('') //处理后的富文本
let contentPic = ref('')
const getImgList = () => {
let srcList = [];
content.value = dataObj.value.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
console.log(capture, 'capture');
srcList.push(capture); // capture图片地址 match img标签整体
return `<img src=${capture} class="content-img">`;//给图片添加class方便后面取dom
});
nextTick(() => {
const imgHtml = document.getElementsByClassName('content-img');
for (let i = 0; i < imgHtml.length; i += 1) {
imgHtml[i].onclick = () => {
//解决点击预览时不是当前图片问题
const tempImgList = [...srcList];// 所有图片地址
if (i === 0) {
contentPic.value = tempImgList;
} else {
// 调整图片顺序,把当前图片放在第一位
const start = tempImgList.splice(i);
const remain = tempImgList.splice(0, i);
contentPic.value = start.concat(remain);
}
console.log(contentPic.value, 'contentPic.value');
showImagePreview([contentPic.value[0]]);
}
}
})
}