杭州做微信网站软件公司,微信开放平台帐号,哪类型网站容易做,在线免费网站模板Html渲染 HtmlViewer插件通过将一个外部DIV附着在图形控件上#xff0c;从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形#xff0c;从而获得更加丰富的图形展现。 通常情况下#xff0c;我们创建的图形控件#xff…Html渲染 HtmlViewer插件通过将一个外部DIV附着在图形控件上从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形从而获得更加丰富的图形展现。 通常情况下我们创建的图形控件如下图所示 通过HtmlViewer插件我们可以使用表现力更强的HTML元素来替换显示的图形或者结合业务需要将一些业务数据显示在图形上如下 本篇最后提供的示例可以在DDei文档直接预览。
一、HTML渲染
ReplaceDivDemo.vue 渲染模板
script langts
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
templatediv refdivElementstyledisplay: flex;flex-direction:column;text-align:center;align-items: center;background: white;color:black;display: none;div stylewidth:100%;display: flex;text-align:center;align-items: center;div styleflex:1代码/divdiv styleflex:1{{ type }}/div/divdiv stylewidth:100%;display: flex;text-align:center;align-items: center;div styleflex:1名称/divdiv styleflex:1{{ name }}/div/div/div
/templatedemo.vue
script setup langts
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的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,}]}},//配置扩展插件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-valuetype: emp_1,name: 张三,viewer: ReplaceDivDemo //HTML模板控件},emp_2: {type: emp_2,name: 李四,viewer: ReplaceDivDemo},emp_3: {type: emp_3,name: 王五,viewer: ReplaceDivDemo}})],
}
/scripttemplatediv stylewidth:400px;height:400px;margin:100px auto;// [!code --]DDeiEditorView :optionsoptions idddei_editor_1/DDeiEditorView/div// [!code --]
/template仓库信息
源码: https://gitee.com/hoslay/ddei-editor
文档: http://docs.ddei.top
在线体验: https://www.ddei.top
