app-preset-text.vue

<template>
    <div :class="['app-preset-text', `app-preset-text--${contentType.toLowerCase()}`]">
        <!-- 直接内容类型 -->
        <template v-if="Object.is(contentType, 'RAW')">
            <template v-if="Object.is(renderMode, 'TEXT')">
                <span :style="cssStyle">{{ content }}</span>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING1')">
                <h1 :style="cssStyle">{{ content }}</h1>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING2')">
                <h2 :style="cssStyle">{{ content }}</h2>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING3')">
                <h3 :style="cssStyle">{{ content }}</h3>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING4')">
                <h4 :style="cssStyle">{{ content }}</h4>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING5')">
                <h5 :style="cssStyle">{{ content }}</h5>
            </template>
            <template v-else-if="Object.is(renderMode, 'HEADING6')">
                <h6 :style="cssStyle">{{ content }}</h6>
            </template>
            <template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
                <p :style="cssStyle">{{ content }}</p>
            </template>
        </template>
        <!-- 图片类型 -->
        <template v-else-if="Object.is(contentType, 'IMAGE')">
            <img :style="cssStyle" v-if="imgUrl" :src="imgUrl" />
            <i :style="cssStyle" v-else :class="imageClass ? imageClass : ''"></i>
        </template>
        <!-- HTML类型 -->
        <template v-else-if="Object.is(contentType, 'HTML')">
            <div :style="cssStyle" v-html="content" />
        </template>
        <!-- MARKDOWN类型 -->
        <template v-else-if="Object.is(contentType, 'MARKDOWN')">
            MARKDOWN暂未支持
            <!-- <app-markdown-editor :style="cssStyle" 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({ default: 'RAW' }) public contentType!: 'RAW' | 'HTML' | 'IMAGE' | 'MARKDOWN';

    /**
     * 绘制模式
     *
     * @type {string}
     * @memberof AppPresetText
     */
    @Prop({ default: 'TEXT' }) public renderMode!: 'TEXT' | 'HEADING1' | 'HEADING2' | 'HEADING3' | 'HEADING4' | 'HEADING5' | 'HEADING6' | 'PARAGRAPH';

    /**
     * 内容样式
     *
     * @type {string}
     * @memberof AppPresetText
     */
    @Prop() public contentStyle?: string;

    /**
     * 预置类型
     *
     * @type {string}
     * @memberof AppPresetText
     */
    @Prop({ default: 'STATIC_TEXT' }) public predefinedType!: 'FIELD_TEXT_DYNAMIC' | 'STATIC_LABEL' | 'STATIC_TEXT';

    /**
     * 图标
     *
     * @memberof AppPresetText
     */
    @Prop() public imageClass?: string;

    /**
     * 动态图片路径
     *
     * @memberof AppPresetText
     */
    protected dynaImgUrl: string = '';

    /**
     * 样式
     *
     * @memberof AppPresetText
     */
    protected cssStyle: string = '';

    /**
     * 图片路径
     *
     * @memberof AppPresetText
     */
    get imgUrl(): string {
        return this.dynaImgUrl;
    }

    /**
     * 内容
     *
     * @memberof AppPresetText
     */
    get content(): string {
        let content = this.value;
        if (this.contentType == 'HTML') {
            const items = content.match(/\{{(.+?)\}}/g);
            if (items) {
                items.forEach((item: string) => {
                    content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
                });
            }
            content = content.replaceAll('&lt;', '<');
            content = content.replaceAll('&gt;', '>');
            content = content.replaceAll('&amp;nbsp;', ' ');
            content = content.replaceAll('&nbsp;', ' ');
        }
        return content;
    }

    /**
     * Vue生命周期 --- Created
     *
     * @memberof AppPresetText
     */
    created() {
        this.handleText();
        this.handleDynaImg();
    }

    /**
     * 处理文本
     *
     * @memberof AppPresetText
     */
    protected handleText() {
        if (this.predefinedType === 'STATIC_LABEL') {
            this.cssStyle += "white-space: nowrap;overflow: hidden;text-overflow: ellipsis;";
        }
    }

    /**
     * 处理动态图片
     *
     * @memberof AppPresetText
     */
    protected handleDynaImg() {
        // TODO 动态图片
        // if (this.value && typeof this.value == 'string') {
        //     // 默认识别文件对象形式，识别失败则为全路径模式
        //     try {
        //         const _files = JSON.parse(this.value);
        //         const file = _files instanceof Array ? _files[0] : null;
        //         const url = file && file.id ? `${this.downloadUrl}/${file.id}` : '';
        //         ImgurlBase64.getInstance()
        //         .getImgURLOfBase64(url)
        //         .then((res: any) => {
        //             this.dynaImgUrl = res;
        //         });
        //     } catch (error) {
        //         this.dynaImgUrl = this.value;
        //     }
        // }
    }

}
</script>
<style lang="less">
@import './app-preset-text.less';
</style>