DDei在线设计器-HTML渲染

Html渲染

  HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。

  通常情况下，我们创建的图形控件，如下图所示：

  通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：

  本篇最后提供的示例可以在DDei文档直接预览。

一、HTML渲染

ReplaceDivDemo.vue 渲染模板

<script lang="ts">
export default {
  name: "replace-div-demo",
  props: {
    type: {
      type: String,
      default: null
    },
    name: {
      type: String,
      default: null
    },
    matchField:{
      type: String,
      default: null
    },
    editor:{
      type:Object,
      default:null
    }
  },
  
  mounted() {
    let field = this.matchField;
    this.editor.renderViewerIns[this[field]] = this.$refs['divElement']
  }
};
</script>
<template>
  <div ref="divElement"
    style="display: flex;flex-direction:column;text-align:center;align-items: center;background: white;color:black;display: none;">
    <div style="width:100%;display: flex;text-align:center;align-items: center;">
      <div style="flex:1">代码</div>
      <div style="flex:1">{{ type }}</div>
    </div>
    <div style="width:100%;display: flex;text-align:center;align-items: center;">
      <div style="flex:1">名称</div>
      <div style="flex:1">{{ name }}</div>
    </div>
  </div>
</template>

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";
import { DDeiExtHtmlViewer } from "ddei-editor"; // [!code ++]
import ReplaceDivDemo from "./ReplaceDivDemo.vue" // [!code ++] 


const options = {
  config: { 
    initData: {
      //初始化图形控件，type为扩展属性，用来匹配DDeiExtHtmlViewer的matchField
      controls: [ 
        {
          id: "act_1",
          model: "102010",
          type: "emp_1",  // [!code ++]
          text: "第一步",
          border:{color:"yellow",dash:[10,10,5,5],width:5},
          fill:{color:"grey"},
        },
        {
          id: "act_2",
          model: "102010",
          type: "emp_2",  // [!code ++]
          width: 200,
          height: 100,
          text: "第二步",
          offsetY: -70,
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom':[],
      'left': [],
      'right': []
    }),
    //配置htmlviewer插件，matchField用于声明图形控件中的属性与config中的key对应字段  // [!code ++:19]
    DDeiExtHtmlViewer.configuration({
      matchField: "type", //匹配字段
      "emp_1": {          //key-value
        type: "emp_1",
        name: "张三",
        viewer: ReplaceDivDemo  //HTML模板控件
      },
      "emp_2": {
        type: "emp_2",
        name: "李四",
        viewer: ReplaceDivDemo
      },
      "emp_3": {
        type: "emp_3",
        name: "王五",
        viewer: ReplaceDivDemo
      }
    })
    
  ],
}
</script>

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

仓库信息

源码: https://gitee.com/hoslay/ddei-editor

文档: http://docs.ddei.top

在线体验: https://www.ddei.top