DDei在线设计器-V1.2.43

Appearance

自定义控件 ​

  本示例演示了自定义分组、自定义控件、覆写属性以及配置控件属性的方法。

  本示例基于教程快速指南开发，如果您不清楚怎样引入DDei设计器，请查看教程快速指南。

  如需了解详细的API以及参数说明，请参考API文档。

一、自定义分组 ​

demo.vue

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

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    //配置分组以及分组中的控件
    groupDefines:[
      {
        id: '999',
        name: '自定义扩展',
        code: 'custom-group',
        desc: '自定义扩展分组',
        subject: 'custom',
        orderNo: 0,
        controls: [
          {
            'id': '100001',
            'name': '扩展1',
          },
          {
            'id': '100002',
            'name': '扩展2',
          }
        ]
      }
    ],
    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>

实时效果

二、自定义控件 ​

customdemo.js

javascript
//控件定义
const controls: object[] = [
  {
    'id': '9999001',
    'name': '自定义1',
    'code': 'cust_1',
    'desc': '自定义节点1',
    'from': '302006',
    'define': {
      fill: {
        color: "#e1b348"
      }
    }
  },
  {
    'id': '9999002',
    'name': '自定义2',
    'code': 'cust_2',
    'desc': '自定义节点2',
    'from': '302006',
    'define': {
      fill: {
        color: "#ffc0be"
      }
    }
  },
  {
    'id': '9999003',
    'name': '自定义3',
    'code': 'cust_3',
    'desc': '自定义节点3',
    'from': '102010',
    'define': {
      fill: {
        color: "#b1c1b2"
      }
    }
  }
]

//分组定义
const groups: object[] = [
  {
    id: '999',
    name: '自定义扩展',
    code: 'custom-group',
    desc: '自定义扩展分组',
    subject: 'custom',
    orderNo: 0,
    controls: [
      {
        'id': '302002',
        'name': '扩展用例',
      },
      {
        'id': '9999001',
        'name': '自定义1'
      },
      {
        'id': '9999002',
        'name': '自定义2'
      },
      {
        'id': '9999003',
        'name': '自定义3'
      },
      {
        'id': '302007',
        'name': '扩展用例',
      }
    ]
  }
]

export { controls, groups }

demo.vue

vue
<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { DDeiExtUML } from "ddei-editor"; 
import {controls as ControlDefinesDemo,groups as GroupDefinesDemo} from "customdemo"; 

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    controlDefines: ControlDefinesDemo,
    // 自定义分组，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    groupDefines: GroupDefinesDemo,
    initData: {
      controls: [
        {  
          model: "102010",
          text: "初始化图形"
        },
        { 
          model: "9999003",
          text: "初始化图形"
        },
        {
          model: "9999001",
          offsetY:100
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],   
      'right': []
    }),
    DDeiExtUML 
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

三、自定义HTML渲染器 ​

在控件的配置中，可以通过viewer属性为控件指定渲染器，可以由外部的html元素或vue组件来渲染控件。指定viewer后原有的渲染将失效。

HtmlViewerDemo.vue

vue
<script lang="ts">
import { DDeiEnumBusCommandType } from 'ddei-editor'
export default {
  name: "html-viewer-div-demo",
  props: {
    model: {
      type: Object,
      default: null
    },
    editor:{
      type:Object,
      default:null
    }
  }
};
</script>
<template>
  <div ref="divElement" class="html-demo">
    <div style="width:100%;display: flex;text-align:center;align-items: center;">
      <div style="flex:1">ID</div>
      <div style="flex:1">{{ model.id }}</div>
    </div>
    <div style="width:100%;display: flex;text-align:center;align-items: center;">
      <div style="flex:1">名称</div>
      <div style="flex:1">{{ model.name }}</div>
    </div>
  </div>
</template>

<style scoped>
.html-demo {
  position: absolute;
  pointer-events: none;
  user-select: none;
  display: none;
  border: 1px solid grey;
}
</style>

customdemo.js

javascript
//导入自定义HTML
import HtmlViewerDemo from "./HtmlViewerDemo.vue"
//控件定义
const controls: object[] = [
  {
    'id': '9999001',
    'name': '自定义1',
    'code': 'cust_1',
    'desc': '自定义节点1',
    'from': '302006',
    'define': {
      fill: {
        color: "#e1b348"
      }
    },
    viewer: HtmlViewerDemo
  }
]

//分组定义
const groups: object[] = [
  {
    id: '999',
    name: '自定义扩展',
    code: 'custom-group',
    desc: '自定义扩展分组',
    subject: 'custom',
    orderNo: 0,
    controls: [
      {
        'id': '302002',
        'name': '扩展用例',
      },
      {
        'id': '9999001',
        'name': '自定义1'
      }
    ]
  }
]

export { controls, groups }

demo.vue

vue
<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { DDeiExtUML } from "ddei-editor"; 
import {controls as ControlDefinesDemo,groups as GroupDefinesDemo} from "customdemo"; 

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    controlDefines: ControlDefinesDemo,
    // 自定义分组，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    groupDefines: GroupDefinesDemo,
    initData: {
      controls: [
        {  
          model: "102010",
          text: "初始化图形"
        },
        { 
          model: "9999001"
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],   
      'right': []
    }),
    DDeiExtUML 
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

四、覆写已有控件属性 ​

customdemo.js

javascript
//控件定义
const controls: object[] = [
  //复写已有的配置
  {
    'id': '100002',
    'define': {
      fill: {
        color: "#e1b348"
      },
      width:150,
      height:100
    }
  }
]

export { controls }

demo.vue

vue
<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import {controls as ControlDefinesDemo} from "customdemo"; 

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    controlDefines: ControlDefinesDemo,
    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>

实时效果

五、自定义属性 ​

customdemo.js

javascript
//控件定义
const controls: object[] = [
  {
    'id': '9999001',
    'name': '自定义1',
    'code': 'cust_1',
    'desc': '自定义节点1',
    'from': '302006',
    'define': {
      fill: {
        color: "#e1b348"
      },
      //扩展属性与分组信息
      ext: {
        attrs: [
          {
            'code': 'text1',
            'name': '文本1',
            'desc': '控件的主体显示文本',
            'controlType': 'excheckbox',
            'dataType': 'integer',
            'dataSource': [{ 'text': '文本', 'value': 0 }, { 'text': '数字', 'value': 1 }, { 'text': '金额', 'value': 2 }, { 'text': '时间', 'value': 3 }],
            'itemStyle': { width: 80, height: 25, col: 2, row: 0, imgWidth: 20, imgHeight: 20 },
            'isArray': true,
            'defaultValue': [1, 2],
            'type': [1, 2], //类别，1图形，2业务，3事件
            'readonly': true,
          },
        ],
        groups: [
          {
            name: "数据",
            icon: 'icon-a-ziyuan409',
            subGroups: [
              {
                name: "分组1",
                attrs: ["code", "text1"]
              },
              {
                name: "分组2",
                attrs: ["text"]
              },

            ]
          },
        ]
      }
    }
  }
]

//分组定义
const groups: object[] = [
  {
    id: '999',
    name: '自定义扩展',
    code: 'custom-group',
    desc: '自定义扩展分组',
    subject: 'custom',
    orderNo: 0,
    controls: [
      {
        'id': '9999001',
        'name': '自定义1'
      }
    ]
  }
]

export { controls, groups }

demo.vue

vue
<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { DDeiExtUML } from "ddei-editor"; 
import {controls as ControlDefinesDemo,groups as GroupDefinesDemo} from "customdemo"; 

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    // 自定义控件，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    controlDefines: ControlDefinesDemo,
    // 自定义分组，接收一个object[]。由于定义内容较多，提取到外部，便于维护
    groupDefines: GroupDefinesDemo,
    initData: {
      controls: [
        { 
          model: "9999001",
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],   
      'right': [] 
    }),
    DDeiExtUML 
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

技术支持 ​

QQ:3697355039
微信公众号:ddei757