<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>