扩展工具箱

本示例介绍了扩展控件工具以及控件的方式。

本示例基于教程快速指南开发，请查看教程快速指南。

通过DDeiCoreToolboxSimplePanel的configuration方法可以配置控件工具箱以及控件。

demo.vue

vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor"; //导入DDei设计器
import DDeiFlow from "ddei-flow";//导入DFlow流程图插件
import {DDeiCoreToolboxSimplePanel} from "ddei-editor"; //导入工具栏插件
const options = {
  //配置扩展插件
  extensions: [
    DDeiFlow, //引入DDeiFlow插件
    DDeiCoreToolboxSimplePanel.configuration({ //配置控件工具栏及控件
      direct: 2,//方向，1纵向，2横向
      position: 6,//位置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，平移画布
          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>`  //指定图标
        },
        {               
          editMode: 4,  //分组类型：4，创建连线
          desc: "ddei.flow.sequence", //描述文本i18n
          controls: [  
            "1000601"
          ]
        },
        {             //普通分组，创建控件
          controls: [ //组内控件，控件定义ID列表
            "1000401",  
          ]
        },
        {              //普通分组，创建控件
          controls: [  //组内控件，控件定义ID列表，当组内有多个控件时，可以切换创建的控件
            "1000001",
            "1000004"
          ]
        }
      ]
    })
  ]
}
</script>

<template>
  <DDeiEditorView :options="options" id="dflow_editor_1"></DDeiEditorView>
</template>

实时效果

技术支持

QQ:3697355039

微信公众号:ddei757

扩展工具箱 ​

技术支持 ​

扩展工具箱

技术支持