富文本内容图片点击实现多图预览

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