union-question-web/src/modules/card/elements/explain/ElemExplainEdit.vue

<template>
  <div class="elem-explain elem-explain-edit">
    <div v-if="data.showTitle" ref="ElemTitle" class="elem-title">
      {{ data.parent.topicName }}
    </div>
    <div class="elem-body" :style="bodyStyle">
      <div
        v-if="data.parent.questionsCount > 1 && !data.isExtend"
        class="elem-explain-no"
      >
        {{ data.serialNumber }}、
      </div>
      <!-- 解答题子元件编辑区域 -->
      <div
        class="elem-explain-elements"
        @drop.prevent="dropInnerElement($event)"
        @dragover.prevent
        @dragleave.prevent
      >
        <elem-explain-element-edit
          v-for="element in data.elements"
          :key="element.id"
          :data="element"
          :transform-fit="rebuildGuides"
          @resize-over="elementResizeOver"
        ></elem-explain-element-edit>
        <!-- guide-lines -->
        <div class="element-guide-lines">
          <div
            v-for="line in xLines"
            :key="`x-${line.top}`"
            class="guide-line guide-line-x"
            :style="line"
          ></div>
          <div
            v-for="line in yLines"
            :key="`y-${line.left}`"
            class="guide-line guide-line-y"
            :style="line"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import ElemExplainElementEdit from "./ElemExplainElementEdit";
import guideLinesMixins from "../../mixins/guideLines";

export default {
  name: "ElemExplainEdit",
  components: { ElemExplainElementEdit },
  mixins: [guideLinesMixins],
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      bodyStyle: {},
    };
  },
  computed: {
    ...mapState("card", ["curDragElement"]),
  },
  watch: {
    "data.parent": {
      handler() {
        this.modifyBodyStyle();
      },
    },
  },
  mounted() {
    this.modifyBodyStyle();
  },
  methods: {
    ...mapMutations("card", ["setCurDragElement", "setCurElement"]),
    ...mapActions("card", ["rebuildPages", "modifyElementChild"]),
    modifyBodyStyle() {
      this.$nextTick(() => {
        let height = this.data.h;
        if (this.data.showTitle) {
          height = this.data.h - this.$refs.ElemTitle.clientHeight;
        }
        this.bodyStyle = {
          height: height + "px",
        };
      });
    },
    dropInnerElement(e) {
      let { offsetX: x, offsetY: y } = e;
      const { offsetLeft, offsetTop } = this.getOffsetInfo(
        e.target || e.srcElement
      );
      // 解答题的子元素中会新增container字段
      const curElement = {
        ...this.curDragElement,
        x: x + offsetLeft,
        y: y + offsetTop,
        container: {
          id: this.data.id,
          type: this.data.type,
        },
      };
      this.elementResizeOver(curElement);
      this.setCurDragElement({});
      this.setCurElement(curElement);
    },
    getOffsetInfo(dom, endParentClass = "elem-explain-elements") {
      let parentNode = dom;
      let offsetTop = 0,
        offsetLeft = 0;
      while (!parentNode.className.includes(endParentClass)) {
        offsetTop += parentNode.offsetTop;
        offsetLeft += parentNode.offsetLeft;
        parentNode = parentNode.offsetParent;
      }
      return {
        offsetLeft,
        offsetTop,
      };
    },
    elementResizeOver(element) {
      this.clear();
      this.modifyElementChild(element);
      this.$nextTick(() => {
        this.rebuildPages();
      });
    },
    rebuildGuides(element, actionType) {
      return this.rebuild(this.data.elements, element, actionType);
    },
  },
};
</script>