<template> <div :class="curClassName" :style="curStyle"> <!-- 直接内容类型 --> <template v-if="Object.is(contentType, 'RAW')"> <template v-if="Object.is(renderMode, 'TEXT')"> <span :style="contentStyle">{{ content }}</span> </template> <template v-else-if="Object.is(renderMode, 'HEADING1')"> <h1 :style="contentStyle">{{ content }}</h1> </template> <template v-else-if="Object.is(renderMode, 'HEADING2')"> <h2 :style="contentStyle">{{ content }}</h2> </template> <template v-else-if="Object.is(renderMode, 'HEADING3')"> <h3 :style="contentStyle">{{ content }}</h3> </template> <template v-else-if="Object.is(renderMode, 'HEADING4')"> <h4 :style="contentStyle">{{ content }}</h4> </template> <template v-else-if="Object.is(renderMode, 'HEADING5')"> <h5 :style="contentStyle">{{ content }}</h5> </template> <template v-else-if="Object.is(renderMode, 'HEADING6')"> <h6 :style="contentStyle">{{ content }}</h6> </template> <template v-else-if="Object.is(renderMode, 'PARAGRAPH')"> <p :style="contentStyle">{{ content }}</p> </template> </template> <!-- 图片类型 --> <template v-else-if="Object.is(contentType, 'IMAGE')"> <img :style="contentStyle" v-if="imagePath" :src="imagePath" /> <i :style="contentStyle" v-else :class="cssClass"></i> </template> <!-- HTML类型 --> <template v-else-if="Object.is(contentType, 'HTML')"> <div :style="contentStyle" v-html="content" /> </template> <!-- MARKDOWN类型 --> <template v-else-if="Object.is(contentType, 'MARKDOWN')"> MARKDOWN暂未支持 <!-- <app-markdown-editor :style="contentStyle" mode="PREVIEWONLY" :itemValue="value"></app-markdown-editor> --> </template> </div> </template> <script lang="ts"> import { Vue, Component, Prop } from 'vue-property-decorator'; @Component({}) export default class AppPresetText extends Vue { /** * 输入值 * * @type {*} * @memberof AppPresetText */ @Prop() public value!: any; /** * 名称 * * @type {string} * @memberof AppPresetText */ @Prop() public name!: string; /** * 布局模型详情 * * @type {*} * @memberof AppPresetTitle */ @Prop() public layoutModelDetails: any; /** * 图标 * * @memberof AppPresetText */ @Prop() public imageClass?: string; /** * 下标 * * @type {number} * @memberof AppPresetText */ @Prop() public index?: number; /** * 项名称 * * @type {*} * @memberof AppPresetText */ get itemName() { return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name; } /** * 图片路径 * * @memberof AppPresetText */ get imagePath() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { let imagePath = ''; if (layoutModel.sysImage) { imagePath = layoutModel.sysImage.imagePath; } return imagePath; } } /** * 图标 * * @memberof AppPresetTitle */ get cssClass() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { let cssClass = ''; if (layoutModel.sysImage) { cssClass = layoutModel.sysImage.iconcls; } return cssClass; } } /** * 内容类型 * * @memberof AppPresetTitle */ get contentType() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.contentType || 'RAW'; } } /** * 类名 * * @memberof AppPresetTitle */ get curClassName() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return `app-preset-text app-preset-text--${this.contentType.toLowerCase()} ${this.itemName} ${layoutModel.sysCss}`; } } /** * 当前容器样式 * * @memberof AppPresetTitle */ get curStyle() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.getElementStyle(); } } /** * 绘制模式 * * @memberof AppPresetTitle */ get renderMode() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { return layoutModel.renderMode == 'TEXT_DYNAMIC' ? 'TEXT' : layoutModel.renderMode; } } /** * 内容 * * @memberof AppPresetText */ get content() { const layoutModel = this.layoutModelDetails[this.itemName]; let content = this.value; if (layoutModel && layoutModel.predefinedType && layoutModel.predefinedType !== 'FIELD_TEXT_DYNAMIC') { if (this.contentType == 'RAW') { content = layoutModel.rawContent; } else if (this.contentType == 'HTML') { content = layoutModel.htmlContent; const items = content.match(/\{{(.+?)\}}/g); if (items) { items.forEach((item: string) => { content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2))); }); } content = content.replaceAll('<', '<'); content = content.replaceAll('>', '>'); content = content.replaceAll('&nbsp;', ' '); content = content.replaceAll(' ', ' '); } } return content; } /** * 内容样式 * * @memberof AppPresetText */ get contentStyle() { const layoutModel = this.layoutModelDetails[this.itemName]; if (layoutModel) { let contentStyle = layoutModel.contentStyle; if (layoutModel.predefinedType === 'STATIC_LABEL') { contentStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"; } return contentStyle; } } } </script> <style lang="less"> @import './app-preset-text.less'; </style>