html-container.vue

<template>
<div>
    <div class="html-container" v-html="rHtml" @click="handleClick"></div>
    <div class="img-modal" v-show="showModal" @click="() => {showModal = false}">
        <img :src="modalSrc" :alt="modalAlt" class='thum-img'/>
    </div>
</div>
</template>
<script lang="tsx">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { Environment } from '@/environments/environment';

/**
 * 操作历史记录
 *
 * @export
 * @class HtmlContainer
 * @extends {Vue}
 */
@Component({})
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 string
     * @memberof HtmlContainer
     */
    public modalSrc: string = '';
    
    /**
     * 模态框图片alt
     * 
     * @type string
     * @memberof HtmlContainer
     */
    public modalAlt: string = '';

    /**
     * 监控html变化
     * 
     * @memberof HtmlContainer
     */
    @Watch('content', { immediate: true })
    public watchContent(): void {
        if (this.content) {
            if (!Object.is(this.content, '')) {
                this.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.BaseUrl}${Environment.ExportFile}/$1`);
                return;
            }
        }
        this.rHtml = '';
    }

    /**
     * 点击事件
     * 
     * @memberof HtmlContainer
     */
    public handleClick($event: any) {
        let img: any = $event.target;
        if(img && Object.is('IMG', img.tagName)) {
            this.modalSrc = img.getAttribute("src");
            this.modalAlt = img.alt;
            this.showModal = true;
        }
    }
}
</script>
<style lang="less">
    .html-container {
        height: 100%;
        width: 100%;

        img {
            max-width: 500px;
            max-height: 500px;
            cursor: zoom-in;
        }
    }
    .img-modal {
        position: fixed;
        z-index: 1000000;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color:#fff;
        text-align: center;
        width: auto;
        overflow: scroll;
        display: flex;
        justify-content: center;
        align-items: center;
        .thum-img {
            max-width: 100%;
            max-height: 100%;
        }
    }
</style>