实现思路:
获取到富文本中所有的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]]);}}})
}
