teachcloud-print-web/card/components/TopicElementPreview.vue

<template>
  <div class="topic-element-preview">
    <div
      :class="classes"
      :id="`preview-${data.id}`"
      :data-type="data.type"
      :style="styles"
    >
      <component :is="compName" :data="data" preview></component>
    </div>
  </div>
</template>

<script>
import PreviewCardHead from "../elements/card-head/CardHead";
import PreviewExplain from "../elements/explain/ElemExplain";
import PreviewComposition from "../elements/composition/ElemComposition";
import PreviewFillQuestion from "../elements/fill-question/ElemFillQuestion";
import PreviewFillLine from "../elements/fill-line/ElemFillLine";
import PreviewTopicHead from "../elements/topic-head/TopicHead";

export default {
  name: "topic-element-preview",
  components: {
    PreviewCardHead,
    PreviewTopicHead,
    PreviewFillQuestion,
    PreviewFillLine,
    PreviewExplain,
    PreviewComposition
  },
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    elementName() {
      return this.data.type.toLowerCase().replace("_", "-");
    },
    compName() {
      return `preview-${this.elementName}`;
    },
    classes() {
      return [
        "topic-preview",
        "element-item",
        "element-item-width",
        `element-item-${this.elementName}`,
        this.data["isLast"] ? `element-item-type-last` : "element-item-type-pre"
      ];
    },
    styles() {
      return {
        left: this.data.x + "px",
        top: this.data.y + "px",
        width: this.data.w + "px",
        height: this.data.h + "px"
      };
    }
  },
  methods: {}
};
</script>