<template> <div> <div class="html-container" v-html="rHtml" ref="outer" @click="handleClick"></div> <div class="src-canvas"> <el-image-viewer v-if="showModal" :on-close="()=>{ showModal = false }" :url-list="viewerList" /> </div> </div> </template> <script lang="tsx"> import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; import { Environment } from '@/environments/environment'; import ElImageViewer from 'element-ui/packages/image/src/image-viewer.vue'; import { ImgurlBase64 } from 'ibiz-core'; /** * 操作历史记录 * * @export * @class HtmlContainer * @extends {Vue} */ @Component({ components:{ 'el-image-viewer':ElImageViewer } }) export default class HtmlContainer extends Vue { /** * 替换后html内容 * * @type string * @memberof HtmlContainer */ protected rHtml: string = ''; /** * 呈现的Html内容 * * @type string * @memberof HtmlContainer */ @Prop({ default: `` }) public content!: string; /** * 是否显示模态框 * * @type string * @memberof HtmlContainer */ public showModal: boolean = false; /** * 图片地址列表 * * @type Array * @memberof HtmlContainer */ public srcList: Array<any> = []; /** * 模态框图片地址列表 * * @type Array * @memberof HtmlContainer */ public viewerList: Array<any> = []; /** * 监控html变化 * * @memberof HtmlContainer */ @Watch('content', { immediate: true }) public async watchContent(): Promise<void> { this.srcList = []; if (this.content) { if (!Object.is(this.content, '')) { let rHtml = this.content.replace( /\{(\d+)\.(bmp|jpg|jpeg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp)\}/g, `${Environment.ExportFile}/$1` ); this.rHtml = await this.geturlList(rHtml); return; } } this.rHtml = ''; } /** * 获取图片地址 * * @memberof HtmlContainer */ public async geturlList(rHtml: any){ let imgs:Array<any>|null = rHtml.match(/<img.*?(?:>|\/>)/gi)!=null? rHtml.match(/<img.*?(?:>|\/>)/gi):[]; if(imgs && imgs.length>0){ for (let item of imgs) { if(item.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/ig)!=null){ let src:any = item.match(/src=[\'\"]?([^\'\"]*)[\'\"]?/ig)[0]; src = await ImgurlBase64.getInstance().getImgURLOfBase64(src.substring(5,src.length-1)); const image = item.replace(/src=[\'\"]?([^\'\"]*)[\'\"]?/ig, 'src="'+src+'"'); rHtml = rHtml.replace(item, image); this.srcList.push(src); } } } return rHtml; } /** * 点击事件 * * @memberof HtmlContainer */ public handleClick($event: any) { let img: any = $event.target; if (img && Object.is('IMG', img.tagName)) { this.showModal = true; let curSrc:any = img.getAttribute('src'); if(this.srcList){ let curIndex:any = this.srcList.findIndex((item)=>{ return item == curSrc }); let beforeList: Array<any>= []; for(let i=0;i<curIndex;i++){ beforeList.push(this.srcList[i]); } let afterList: Array<any>= []; for(let i=curIndex;i<this.srcList.length;i++){ afterList.push(this.srcList[i]); } this.viewerList = afterList.concat(beforeList); } } } } </script>