<template> <div class="elem-explain elem-explain-edit"> <div class="elem-title" v-if="data.showTitle" ref="ElemTitle"> {{ data.parent.topicName }} </div> <div class="elem-body" :style="bodyStyle"> <div class="elem-explain-no" v-if="data.parent.questionsCount > 1 && !data.isExtend" > {{ 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 class="guide-line guide-line-x" v-for="line in xLines" :key="`x-${line.top}`" :style="line" ></div> <div class="guide-line guide-line-y" v-for="line in yLines" :key="`y-${line.left}`" :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: "elem-explain-edit", components: { ElemExplainElementEdit }, mixins: [guideLinesMixins], props: { data: { type: Object, }, }, 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>