teachcloud-print-web/src/modules/card/components/elementEdit/ExplainChildrenElement.vue

<template>
  <div class="explain-children-element">
    <element-resize
      v-model="elemData"
      :class="{ 'element-resize-act': curElement.id === data.id }"
      :active="active"
      fit-parent
      @change="elementChange"
      @on-click="activeCurElement"
    >
      <div
        class="explain-element"
        :style="styles"
        :id="data.id"
        :data-type="data.type"
      >
        <component :is="compName" :data="data"></component>
      </div>
    </element-resize>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

import ElemText from "../elementPreview/ElemText";
import ElemImage from "../elementPreview/ElemImage";
import ElemLineHorizontal from "../elementPreview/ElemLineHorizontal";
import ElemLineVertical from "../elementPreview/ElemLineVertical";
import ElementResize from "../common/ElementResize.vue";

export default {
  name: "explain-children-element",
  components: {
    ElemText,
    ElemImage,
    ElemLineHorizontal,
    ElemLineVertical,
    ElementResize
  },
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      elemData: {
        x: 0,
        y: 0,
        w: 0,
        h: 0
      },
      styles: {},
      actives: {
        TEXT: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
        IMAGE: ["r", "rb", "b", "lb", "l", "lt", "t", "rt"],
        LINE_HORIZONTAL: ["l", "r"],
        LINE_VERTICAL: ["t", "b"]
      }
    };
  },
  computed: {
    ...mapState("card", ["curElement"]),
    compName() {
      return `elem-${this.data.type.toLowerCase().replace("_", "-")}`;
    },
    active() {
      return this.actives[this.data.type];
    }
  },
  created() {
    this.init();
  },
  methods: {
    ...mapMutations("card", ["setCurElement"]),
    init() {
      this.elemData = this.$objAssign(this.elemData, this.data);
      this.styles = {
        left: this.data.x + "px",
        top: this.data.y + "px",
        width: this.data.w + "px",
        height: this.data.h + "px"
      };
    },
    elementChange() {
      this.$emit("change", Object.assign({}, this.data, this.elemData));
    },
    activeCurElement() {
      this.setCurElement(this.data);
    }
  }
};
</script>