简洁布局

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

一、使用方式

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor"; 

const options = {
  currentLayout: "ddei-core-layout-simple", 
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    initData: {
      controls: [
        {
          model: "102010",
          text: "初始化图形",
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    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"; 

const options = {
  currentLayout: "ddei-core-layout-simple", 
  config: { 
    initData: {
      controls: [
        {
          model: "102010",
          text: "初始化图形",
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局元素配置
    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"
import TopMenuViewerDemo from "./TopMenuViewerDemo.vue"

const options = {
  currentLayout: "ddei-core-layout-simple", 
  config: { 
    initData: {
      controls: [
        {
          model: "102010",
          text: "初始化图形",
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //配置控件工具项
    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"
          ]
        }
      ]
    }),

    //配置顶部菜单
    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>

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757