teachcloud-print-web/src/modules/card/components/TopicElementEdit.vue

<template>
  <div class="topic-element">
    <div
      :class="classes"
      :id="data.id"
      :data-type="data.type"
      v-if="data.type === 'CARD_HEAD' || data.type === 'TOPIC_HEAD'"
    >
      <!-- card-head 和 topic-head不需要调整高度 -->
      <component :is="compName" :data="data"></component>
    </div>
    <element-resize
      v-model="elemData"
      :class="{ 'element-resize-act': curElement.id === data.id }"
      :active="['b']"
      :move="false"
      :min-height="20"
      fit-parent
      @on-click="activeCurElement"
      @resize-over="resizeOver"
      v-else
    >
      <div :class="classes" :id="data.id" :data-type="data.type">
        <component :is="compName" :data="data"></component>
      </div>
      <!-- topic-number -->
      <topic-number :data="data.topicNo"></topic-number>
    </element-resize>
  </div>
</template>

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

import EditCardHead from "./elementEdit/CardHead";
import EditFillQuestion from "./elementPreview/FillQuestion";
import EditFillLine from "./elementPreview/FillLine";
import EditExplainChildren from "./elementEdit/ExplainChildren";
import EditComposition from "./elementEdit/Composition";
import EditTopicHead from "./elementPreview/TopicHead";
import ElementResize from "./common/ElementResize.vue";
import TopicNumber from "./common/TopicNumber";

export default {
  name: "topic-design",
  components: {
    EditCardHead,
    EditTopicHead,
    EditFillQuestion,
    EditFillLine,
    EditExplainChildren,
    EditComposition,
    ElementResize,
    TopicNumber
  },
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      elemData: {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
        init: false
      }
    };
  },
  computed: {
    ...mapState("card", ["curElement"]),
    elementName() {
      return this.data.type.toLowerCase().replace("_", "-");
    },
    compName() {
      return `edit-${this.elementName}`;
    },
    classes() {
      return [
        "topic-design",
        "element-item",
        `element-item-${this.elementName}`,
        this.data["isLast"]
          ? `element-item-type-last`
          : "element-item-type-pre",
        {
          "element-item-error": this.data.isCovered
        }
      ];
    }
  },
  mounted() {},
  created() {
    this.init();
  },
  methods: {
    ...mapMutations("card", ["setCurElement"]),
    ...mapActions("card", ["rebuildPages"]),
    init() {
      this.elemData = this.$objAssign(this.elemData, this.data);
    },
    activeCurElement() {
      this.setCurElement(this.data);
    },
    resizeOver() {
      // 注意：当前组件并没有实时更新元件的尺寸信息，只是在rebuildPages时统一更新。
      this.$nextTick(() => {
        this.rebuildPages();
      });
    }
  }
};
</script>