mirror of
https://gitee.com/hoslay/ddei-editor.git
synced 2025-12-06 17:18:36 +08:00
修改标准布局的实现
This commit is contained in:
猴赛雷
parent
9e7bfaf18b
commit
0f06db7410
@ -1,29 +1,26 @@
|
||||
<template>
|
||||
<div class="ddei-editor-layout-standrad">
|
||||
<div class="top" ref="top">
|
||||
<component ref="topComponents" :editor="editor" v-for="(item,index) in editor?.getPartPanels(options,'top')"
|
||||
:is="item.comp" v-bind="item.options" :options="item.options"></component>
|
||||
<div class="top" ref="top" v-show="topComponents?.length > 0">
|
||||
<component ref="topComponents" :editor="editor" v-for="(item,index) in topComponents" :is="item.comp"
|
||||
v-bind="item.options" :options="item.options"></component>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="left" ref="left" v-show="toolboxShow">
|
||||
<component ref="leftComponents" :editor="editor" v-for="(item, index) in editor?.getPartPanels(options, 'left')"
|
||||
:is="item.comp" :options="item.options" v-bind="item.options"></component>
|
||||
<div class="left" ref="left" v-show="toolboxShow && leftComponents?.length > 0">
|
||||
<component ref="leftComponents" :editor="editor" v-for="(item, index) in leftComponents" :is="item.comp"
|
||||
:options="item.options" v-bind="item.options"></component>
|
||||
</div>
|
||||
<div class="middle" ref="middle">
|
||||
<component ref="middleComponents" :editor="editor"
|
||||
v-for="(item, index) in editor?.getPartPanels(options, 'middle')" :is="item.comp" :options="item.options"
|
||||
v-bind="item.options"></component>
|
||||
<div class="middle" ref="middle" v-show="middleComponents?.length > 0">
|
||||
<component ref="middleComponents" :editor="editor" v-for="(item, index) in middleComponents" :is="item.comp"
|
||||
:options="item.options" v-bind="item.options"></component>
|
||||
</div>
|
||||
<div class="right" ref="right" v-show="propertyViewShow">
|
||||
<component ref="rightComponents" :editor="editor"
|
||||
v-for="(item, index) in editor?.getPartPanels(options, 'right')" :is="item.comp" :options="item.options"
|
||||
v-bind="item.options"></component>
|
||||
<div class="right" ref="right" v-show="propertyViewShow && rightComponents?.length > 0">
|
||||
<component ref="rightComponents" :editor="editor" v-for="(item, index) in rightComponents" :is="item.comp"
|
||||
:options="item.options" v-bind="item.options"></component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom" ref="bottom">
|
||||
<component ref="bottomComponents" :editor="editor"
|
||||
v-for="(item, index) in editor?.getPartPanels(options, 'bottom')" :is="item.comp" :options="item.options"
|
||||
v-bind="item.options"></component>
|
||||
<div class="bottom" ref="bottom" v-show="bottomComponents?.length > 0">
|
||||
<component ref="bottomComponents" :editor="editor" v-for="(item, index) in bottomComponents" :is="item.comp"
|
||||
:options="item.options" v-bind="item.options"></component>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -59,6 +56,11 @@ export default {
|
||||
initRightWidth: 0,
|
||||
toolboxShow: true,
|
||||
propertyViewShow: true,
|
||||
leftComponents: [],
|
||||
rightComponents: [],
|
||||
topComponents: [],
|
||||
bottomComponents: [],
|
||||
middleComponents: [],
|
||||
};
|
||||
},
|
||||
//注册组件
|
||||
@ -94,10 +96,17 @@ export default {
|
||||
this.$watch("editor.bottomHeight", function (newVal, oldVal) {
|
||||
this.$refs.bottom.style.flexBasis = newVal + "px";
|
||||
});
|
||||
this.leftComponents = this.editor.getPartPanels(this.options, 'left');
|
||||
this.rightComponents = this.editor.getPartPanels(this.options, 'right');
|
||||
this.topComponents = this.editor.getPartPanels(this.options, 'top');
|
||||
this.bottomComponents = this.editor.getPartPanels(this.options, 'bottom');
|
||||
this.middleComponents = this.editor.getPartPanels(this.options, 'middle');
|
||||
},
|
||||
mounted() {
|
||||
this.editor.layoutViewer = this;
|
||||
|
||||
|
||||
|
||||
// 获取要监听的 div 元素
|
||||
let middleCanvas = document.getElementById(this.editor.id+"_canvas");
|
||||
// 创建 ResizeObserver 实例
|
||||
|
||||
68
src/App.vue
68
src/App.vue
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import DDeiEditorView from "./editor/Editor.vue";
|
||||
import { DDeiCoreTopMenuPanel, DDeiCoreThemeBlack, DDeiCoreControls, DDeiCoreHotkeys, DDeiKeyActionAllSelect, DDeiCorePropertyViewPanel, DDeiCoreToolboxPanel, DDeiCoreSheetsPanel, DDeiCoreChangeRatioPanel, DDeiCoreChangeRatioDialog, DDeiCoreShapeCountPanel, DDeiCoreBottomMenuPanel, DDeiCoreStandLayout, DDeiCoreOpenFilesViewPanel } from "@ddei/core";
|
||||
import { DDeiCoreTopMenuPanel, DDeiCoreThemeBlack, DDeiCoreControls, DDeiCoreHotkeys, DDeiKeyActionAllSelect, DDeiCorePropertyViewPanel, DDeiCoreToolboxPanel, DDeiCoreSheetsPanel, DDeiCoreChangeRatioPanel, DDeiCoreChangeRatioDialog, DDeiCoreShapeCountPanel, DDeiCoreBottomMenuPanel, DDeiCoreStandLayout, DDeiCoreOpenFilesViewPanel, DDeiCoreThemeDefault } from "@ddei/core";
|
||||
import { DDeiExtUML } from "@ddei/uml"
|
||||
import { defineComponent, markRaw } from "vue";
|
||||
export default defineComponent({
|
||||
@ -100,9 +100,66 @@ export default defineComponent({
|
||||
|
||||
],
|
||||
})
|
||||
const options2 = markRaw({
|
||||
config: {
|
||||
|
||||
},
|
||||
//配置扩展插件
|
||||
extensions: [
|
||||
//布局的配置
|
||||
DDeiCoreStandLayout.configuraton({
|
||||
//配置插件
|
||||
'top': [],
|
||||
'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
|
||||
'bottom': [],
|
||||
'left': [],
|
||||
'right': []
|
||||
}),
|
||||
],
|
||||
})
|
||||
const options3 = markRaw({
|
||||
config: {
|
||||
|
||||
},
|
||||
//配置扩展插件
|
||||
extensions: [
|
||||
//布局的配置
|
||||
DDeiCoreStandLayout.configuraton({
|
||||
//配置插件
|
||||
'top': [],
|
||||
'middle': ['ddei-core-panel-canvasview'],
|
||||
'bottom': [],
|
||||
'left': [],
|
||||
'right': []
|
||||
}),
|
||||
DDeiCoreThemeBlack.configuraton({
|
||||
default: true
|
||||
}),
|
||||
],
|
||||
})
|
||||
const options4 = markRaw({
|
||||
config: {
|
||||
|
||||
},
|
||||
//配置扩展插件
|
||||
extensions: [
|
||||
//布局的配置
|
||||
DDeiCoreStandLayout.configuraton({
|
||||
//配置插件
|
||||
'top': [],
|
||||
'middle': ['ddei-core-panel-canvasview'],
|
||||
'bottom': [],
|
||||
'left': [],
|
||||
'right': []
|
||||
}),
|
||||
],
|
||||
})
|
||||
return {
|
||||
options,
|
||||
options1,
|
||||
options2,
|
||||
options3,
|
||||
options4,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -112,6 +169,15 @@ export default defineComponent({
|
||||
<template>
|
||||
<DDeiEditorView ref="editorViewer1" :options="options" id="ddei_editor_1"></DDeiEditorView>
|
||||
<DDeiEditorView ref="editorViewer2" :options="options1" id="ddei_editor_2"></DDeiEditorView>
|
||||
<div style="width:400px;height:400px;float:left">
|
||||
<DDeiEditorView ref="editorViewer3" :options="options2" id="ddei_editor_3"></DDeiEditorView>
|
||||
</div>
|
||||
<div style="width:400px;height:400px;float:left">
|
||||
<DDeiEditorView ref="editorViewer4" :options="options3" id="ddei_editor_4"></DDeiEditorView>
|
||||
</div>
|
||||
<div style="width:400px;height:400px;float:left">
|
||||
<DDeiEditorView ref="editorViewer5" :options="options4" id="ddei_editor_5"></DDeiEditorView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user