vue2富文本实现图片查看

junx666

于 2023-11-03 10:26:48 发布

阅读量198

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/junx666/article/details/134197550

版权

<template>
	<div>
		<div v-html="content"></div>
		<el-image-viewer
	      v-if="showViewer"
	      :on-close="closeViewer"
	      :url-list="contentPic"
	      :z-index="9999"
	      />
	</div>
</template>

JS代码

import ElImageViewer from 'element-ui/packages/image/src/image-viewer';、
components: { ElImageViewer },//引入element组件
 getHtmlPic(val) {
            if (!val) return;
            const srcList = [];
            this.content = val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
                srcList.push(capture); // capture图片地址  match img标签整体
                return `<img src=${capture} class="content-img" style="width:100%;display:block">`; //给图片添加class方便后面取dom
            });
            this.$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) {
                            this.contentPic = tempImgList;
                        } else {
                            // 调整图片顺序，把当前图片放在第一位
                            const start = tempImgList.splice(i);
                            const remain = tempImgList.splice(0, i);
                            this.contentPic = start.concat(remain);
                        }
                        this.onPreview();
                    };
                }
            });
        },

   onPreview() {
            this.showViewer = true;
        },
        closeViewer() {
            this.showViewer = false;
        },