Html渲染

??HtmlViewer插件通過將一個(gè)外部DIV附著在圖形控件上，從而改變?cè)袌D形的顯示方式。允許使用者自己定義HTML通過HTML元素。本示例演示了通過Html來擴(kuò)展渲染圖形，從而獲得更加豐富的圖形展現(xiàn)。

??通常情況下，我們創(chuàng)建的圖形控件，如下圖所示：

??通過HtmlViewer插件，我們可以使用表現(xiàn)力更強(qiáng)的HTML元素來替換顯示的圖形，或者結(jié)合業(yè)務(wù)需要，將一些業(yè)務(wù)數(shù)據(jù)顯示在圖形上，如下：

??本篇最后提供的示例可以在DDei文檔直接預(yù)覽。

一、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為擴(kuò)展屬性，用來匹配DDeiExtHtmlViewer的matchFieldcontrols: [ {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,}]}},//配置擴(kuò)展插件extensions: [//布局的配置DDeiCoreStandLayout.configuration({//配置插件'top': [],'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],'bottom':[],'left': [],'right': []}),//配置htmlviewer插件，matchField用于聲明圖形控件中的屬性與config中的key對(duì)應(yīng)字段  // [!code ++:19]DDeiExtHtmlViewer.configuration({matchField: "type", //匹配字段"emp_1": {          //key-valuetype: "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

在線體驗(yàn): https://www.ddei.top