teachcloud-print-web/card/elements/explain/ElemExplainElement.vue

<template>
  <div class="elem-explain-element">
    <div :class="classes" :style="styles" :id="data.id">
      <component :is="compName" :data="data"></component>
    </div>
  </div>
</template>

<script>
import ElemText from "../text/ElemText";
import ElemImage from "../image/ElemImage";
import ElemLine from "../line/ElemLine";
import ElemLines from "../lines/ElemLines";
import ElemGrids from "../grids/ElemGrids";

export default {
  name: "elem-explain-element",
  components: {
    ElemText,
    ElemImage,
    ElemLine,
    ElemLines,
    ElemGrids,
  },
  props: {
    data: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  computed: {
    compName() {
      if (this.data.type.includes("LINE_")) return "elem-line";
      return `elem-${this.data.type.toLowerCase()}`;
    },
    elementName() {
      return this.data.type.toLowerCase().replace("_", "-");
    },
    classes() {
      return ["explain-element-body", `explain-element-${this.elementName}`];
    },
    styles() {
      return {
        left: this.data.x + "px",
        top: this.data.y + "px",
        width: this.data.w + "px",
        height: this.data.h + "px",
      };
    },
  },
  methods: {},
};
</script>