app-preset-caption.vue

<template>
  <div :class="curClassName" :style="curStyle">
    <template v-if="Object.is(renderMode, 'TEXT')">
      <span class="view__caption__info">
        <slot></slot>
      </span>
    </template>
    <template v-else-if="Object.is(renderMode, 'HEADING1')">
      <h1 class="view__caption__info">
        <slot></slot>
      </h1>
    </template>
    <template v-else-if="Object.is(renderMode, 'HEADING2')">
      <h2 class="view__caption__info">
        <slot></slot>
      </h2>
    </template>
    <template v-else-if="Object.is(renderMode, 'HEADING3')">
      <h3 class="view__caption__info">
        <slot></slot>
      </h3>
    </template>
    <template v-else-if="Object.is(renderMode, 'HEADING4')">
      <h4 class="view__caption__info">
        <slot></slot>
      </h4>
    </template>
    <template v-else-if="Object.is(renderMode, 'HEADING5')">
      <h5 class="view__caption__info">
        <slot></slot>
      </h5>
    </template>
    <template v-else-if="Object.is(renderMode, 'HEADING6')">
      <h6 class="view__caption__info">
        <slot></slot>
      </h6>
    </template>
    <template v-else-if="Object.is(renderMode, 'PARAGRAPH')">
      <p class="view__caption__info">
        <slot></slot>
      </p>
    </template>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({})
export default class AppPresetCaption extends Vue {
  /**
   * 名称
   *
   * @type {string}
   * @memberof AppPresetCaption
   */
  @Prop() public name!: string;

  /**
   * 布局模型详情
   *
   * @type {*}
   * @memberof AppPresetCaption
   */
  @Prop() public layoutModelDetails: any;

  /**
   * 下标
   *
   * @type {number}
   * @memberof AppPresetCaption
   */
  @Prop() public index?: number;

  /**
   * 项名称
   *
   * @type {*}
   * @memberof AppPresetCaption
   */
  get itemName() {
    return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name;
  }

  /**
   * 绘制模式
   *
   * @type {*}
   * @memberof AppPresetCaption
   */
  get renderMode() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.renderMode == 'HEADING1' ? 'TEXT' : layoutModel.renderMode;
    }
  }

  /**
   * 类名
   *
   * @memberof AppPresetCaption
   */
  get curClassName() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return `app-preset-caption ${this.itemName} ${layoutModel.sysCss}`;
    }
  }

  /**
   * 当前容器样式
   *
   * @memberof AppPresetCaption
   */
  get curStyle() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.getElementStyle();
    }
  }
}
</script>

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