<template> <div class="topic-element-edit"> <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="data.minHeight" :fit-parent="['h']" @on-click="activeCurElement" @resize-over="resizeOver" @change="sizeChange" 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" title="点击选中当前题目" @click="activeCurElement" ></topic-number> </element-resize> </div> </template> <script> import { mapState, mapMutations, mapActions } from "vuex"; import { objAssign } from "../plugins/utils"; import { checkElementisCovered } from "../store/card"; import EditCardHead from "../elements/card-head/CardHead"; import EditFillQuestion from "../elements/fill-question/ElemFillQuestion"; import EditFillLine from "../elements/fill-line/ElemFillLine"; import EditExplain from "../elements/explain/ElemExplainEdit"; import EditComposition from "../elements/composition/ElemCompositionEdit"; import EditForbidArea from "../elements/forbid-area/ElemForbidArea.vue"; import EditTopicHead from "../elements/topic-head/TopicHead"; import ElementResize from "./common/ElementResize"; import TopicNumber from "./common/TopicNumber"; export default { name: "topic-element-edit", components: { EditCardHead, EditTopicHead, EditFillQuestion, EditFillLine, EditExplain, EditForbidArea, 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, }, ]; }, }, created() { this.init(); }, methods: { ...mapMutations("card", ["setCurElement"]), ...mapActions("card", ["modifyTopic", "rebuildPages"]), init() { this.elemData = objAssign(this.elemData, this.data); }, activeCurElement() { this.setCurElement(this.data); }, sizeChange() { this.data.isCovered = checkElementisCovered(this.data.id, this.data.type); }, resizeOver() { this.modifyTopic(Object.assign({}, this.curElement, this.elemData)); // 注意:当前组件并没有实时更新元件的尺寸信息,只是在rebuildPages时统一更新。 this.$nextTick(() => { this.rebuildPages(); }); }, }, }; </script>