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>