html-container.vue 3.8 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
<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>