DDei在线设计器-简洁布局

简洁布局

从1.2.41版开始，DDei提供了简洁版界面布局，效果如下：。

在这里插入图片描述

一、使用方式

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor"; // [!code --]const options = {currentLayout: "ddei-core-layout-simple", // [!code ++]config: { "grid": 0, //网格线  // [!code --]"background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]initData: {controls: [{model: "102010",text: "初始化图形",}]}},//配置扩展插件extensions: [//布局的配置 // [!code --:9]DDeiCoreStandLayout.configuration({//配置插件'top': [],'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],'bottom': [],'left': [],'right': []}),],
}
</script><template><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView></div>
</template>

效果预览

在这里插入图片描述

二、配置布局元素

简洁布局默认包含浮动顶部菜单、浮动控件工具箱和底部菜单,这些菜单都通过配置增加或减少。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreSimpleLayout } from "ddei-editor"; // [!code ++]const options = {currentLayout: "ddei-core-layout-simple", // [!code ++]config: { initData: {controls: [{model: "102010",text: "初始化图形",}]}},//配置扩展插件extensions: [//布局元素配置 // [!code ++:6]DDeiCoreSimpleLayout.configuration({other: ['ddei-core-panel-toolbox-simple', 'ddei-core-panel-topmenu-simple'],middle: ['ddei-core-panel-canvasview'],right: [],bottom: ['ddei-core-panel-bottommenu'] //复写配置，加上了底部菜单})],
}
</script><template><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView></div>
</template>

效果预览
在这里插入图片描述

三、自定义菜单

浮动顶部菜单与浮动控件工具箱可以调整初始位置，也能够通过配置以及Vue组件对菜单项进行扩展。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import {DDeiCoreToolboxSimplePanel,DDeiCoreTopMenuSimplePanel} from "ddei-editor" // [!code ++]
import TopMenuViewerDemo from "./TopMenuViewerDemo.vue" // [!code ++]const options = {currentLayout: "ddei-core-layout-simple", // [!code ++]config: { initData: {controls: [{model: "102010",text: "初始化图形",}]}},//配置扩展插件extensions: [//配置控件工具项  // [!code ++:47]DDeiCoreToolboxSimplePanel.configuration({direct: 1,//方向，1纵向，2横向position: 7,//位置1-9顺时针，1为左上角，9为中心drag: 1,//是否允许拖拽位置dragCreate: 1,//是否在选择控件时创建一个控件groups:[ //配置分组与控件{editMode: 1,   //分组类型1，选择器desc:"选择",icon: `<svg class="icon" style="width: 28px; height: 28px;margin-left:-1px;margin-top:2px; " aria-hidden="true"><use xlink: href = "#icon-selector">< /use></svg>`},{editMode: 2,   //分组类型2，平移画布desc: "平移画布",icon: `<svg class="icon" style="width: 28px; height: 28px;margin-left:-1px;margin-top:2px; " aria-hidden="true"><use xlink: href = "#icon-hand">< /use></svg>`},{controls: [   //无分组类型，创建控件"100103"]},{controls: [   //无分组类型，允许选择控件"100001","100002","100003","100004","100005","100006","100007",]},{controls: ["100040","100041","100050","100051"]}]}),//配置顶部菜单  // [!code ++:25]DDeiCoreTopMenuSimplePanel.configuration({direct: 2,//方向，1纵向，2横向position: 3,//位置1-9顺时针，1为左上角，9为中心drag: 0,//是否允许拖拽位置items:[ //配置菜单项{name:'New',   //菜单名称action:(editor,evt)=>{ //动作行为console.log(editor.id)}},{id:'ddei-core-open',  //引用内置菜单name:'Open'},{id:'ddei-core-save',name:'Save'},{viewer:TopMenuViewerDemo //引入一个Vue组件菜单}]})],
}
</script><template><div style="width:400px;height:400px;margin:100px auto;"><DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView></div>
</template>

TopMenuViewerDemo.vue

<script lang="ts">
export default {name: "top-menu-custom-viewer-demo",props: {options: {type: Object,default: null},editor:{type:Object,default:null}},methods:{click(){console.log("自定义:"+this.editor)}}
};
</script>
<template><div style="color:red" @click="click">自定义</div>
</template>

效果预览
在这里插入图片描述