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的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}})],
}
</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
相关文章:
DDei在线设计器-HTML渲染
Html渲染 HtmlViewer插件通过将一个外部DIV附着在图形控件上,从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形,从而获得更加丰富的图形展现。 通常情况下,我们创建的图形控件ÿ…...
【React Hooks原理 - useSyncExternalStore】
概述 在React项目中说到状态管理,我们第一时间想到的就是使用useState、useReducer这种Hooks来进行状态管理。但是这种是针对React内部的状态,如果有时候我们需要订阅外部的状态并影响React组件的更新的话,那通过这种内部状态管理API显然不能…...
C++STL初阶(7):list的运用与初步了解
在了解了vector之后,我们只需要简单学习List与vector不一样的接口即可 1.list的基本接口 1.1 iterator list中,与vector最大的区别就是迭代器由随机迭代器变成双向迭代器 string和vector中的迭代器都是随机迭代器,支持-等,而LIS…...
el-menu弹出菜单样式不生效
1. 使用 ruoyi 项目时出现的问题。 <template><el-menu:default-active"activeMenu":collapse"false":unique-opened"true"class"container":collapse-transition"true"mode"horizontal"><sideba…...
Springboot 3.x - Reactive programming (2)
三、WebFlux Blocking Web vs. Reactive Web Blocking Web (Servlet) and Reactive Web (WebFlux) have significant differences in several aspects. 1. Front Controller Servlet-Blocking Web: Uses DispatcherServlet as the front controller to handle all HTTP req…...
WPF+Mvvm 项目入门完整教程(一)
WPF+Mvvm 入门完整教程一 创建项目MvvmLight框架安装完善整个项目的目录结构创建自定义的字体资源下载更新和使用字体资源创建项目 打开VS2022,点击创建新项目,选择**WPF应用(.NET Framework)** 创建一个名称为 CommonProject_DeskTop 的项目,如下图所示:MvvmLight框架安装…...
[解决方法]git上传的项目markdown文件的图片无法显示
应该有不少初学者会遇到这种情况 以下是本人摸索出的解决方法 我使用的是typora,首先设置typora的图片设置 文件>偏好设置>图像 如下: 选择这个就会在此文件的同级目录下创建一个assets文件夹来存放此markdown文件的所有图片 然后勾选优先使用相…...
【React】使用 antd 加载组件实现 iframe 的加载效果
文章目录 代码实现: import { Spin } from antd; import { useState } from react;export default function () {const [loading, setLoading] useState(true);return (<div style{{ position: relative, height: 100% }}><Spinstyle{{ position: absolu…...
Python爬虫(1) --基础知识
爬虫 爬虫是什么? spider 是一种模仿浏览器上网过程的一种程序,可以获取一些网页的数据 基础知识 URL 统一资源定位符 uniform resource locator http: 超文本传输协议 HyperText Transfer Protocol 默认端口 80 https: 安全的超文本传输协议 security…...
云原生系列 - Jenkins
Jenkins Jenkins,原名 Hudson,2011 年改为现在的名字。它是一个开源的实现持续集成的软件工具。 官方网站(英文):https://www.jenkins.io/ 官方网站(中文):https://www.jenkins.io…...
django踩坑(四):终端输入脚本可正常执行,而加入crontab中无任何输出
使用crontab执行python脚本时,有时会遇到脚本无法执行的问题。这是因为crontab在执行任务时使用的环境变量与我们在终端中使用的环境变量不同。具体来说,crontab使用的环境变量是非交互式(non-interactive)环境变量,而终端则使用交互式(inter…...
计算机网络入门 -- 常用网络协议
计算机网络入门 – 常用网络协议 1.分类 1.1 模型回顾 计算机网络细分可以划为七层模型,分别是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。而上三层可以划为应用层中。 1.2 分类 1.2.1 应用层 为用户的应用进程提供网络通信服务࿰…...
【LabVIEW作业篇 - 4】:属性节点赋值和直接节点赋值的区别体现
文章目录 属性节点赋值和直接节点赋值的区别体现 属性节点赋值和直接节点赋值的区别体现 创建5个圆形指示灯,然后循环点亮,先给圆形指示灯赋值假变量,然后再进行循环。 运行结果,观察结果,发现刚开始运行时࿰…...
【数据库系列】Parquet 文件介绍
💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
A Survey on Multimodal Large Language Models综述
论文题目:A Survey on Multimodal Large Language Models 论文地址:https://arxiv.org/pdf/2306.13549 话题:多模态LLMs综述 MLLMs Paper: https://github.com/BradyFU/Awesome-Multimodal-Large-Language-Models 1. 摘要 近期,以GPT-4V为代表的跨模态大型语言模型(MLLM…...
Leetcode3208. 交替组 II
Every day a Leetcode 题目来源:3208. 交替组 II 解法1:环形数组 把数组复制一份拼接起来,和 3101 题一样,遍历数组的同时,维护以 i 为右端点的交替子数组的长度 cnt。 如果 i ≥ n 且 cnt ≥ k,那么 i…...
汇编教程2
本教程主要教大家如何安装32位Linux虚拟机,为后续实验拆炸弹做准备 下载系统映像文件 以Ubuntu14.04.6系统为例 官方网站:下载地址 点击下载图中32位系统 如果官网进不去可以使用镜像网站 清华镜像网站:下载地址 进入之后找到下图中链接…...
使用 git 和 GitHub 互动
本文根据《GitHub入门与实践》整理 创建账户 要想使用GitHub那就必须先有GitHub账号,账号自行注册,不作介绍。 本地生成 SSH Key SSH 提供了一种安全的方式来通过不安全的网络进行通信。当你使用SSH key连接到GitHub时,你的身份是通过密钥对(一个公钥和一个私钥)来验…...
【Spring Boot 中的 `banner.txt` 和 `logback-spring.xml` 配置】
文章目录 一、banner.txt1. 创建自定义 banner.txt2. 配置 banner.txt 的内容 二、logback-spring.xml1. 创建 logback-spring.xml2. 配置 logback-spring.xml 一、banner.txt banner.txt 是 Spring Boot 项目启动时显示的自定义横幅内容。用来展示项目名称、版本信息或者其他…...
Python Linux环境(Centos8)安装minicoda3+jupyterlab
文章目录 安装miniconda安装python环境启动 最近服务器检查,我下面的服务器有漏洞,不得已重装了,正好记录下怎么从零到python写代码。 安装miniconda miniconda是anconda的精简版,就是管理python环境的得力助手。 # 创建一个名…...
VScode 高效开发 Springboot 应用的完整指南
1. 环境准备与项目创建 第一次用VScode开发Springboot项目时,我对着空白编辑器发呆了半小时。后来发现只要装对插件,效率能翻倍。先打开VScode的扩展商店,这三个插件是必装的: Java Extension Pack:包含语言支持、调…...
语义通信:从理论到6G落地的关键技术演进与挑战
1. 语义通信的理论基石 语义通信(Semantic Communication, SemCom)的核心思想与传统通信有着本质区别。传统通信追求的是"准确传输比特流",而语义通信关注的是"有效传递信息的意义"。这就像两个人对话:传统通…...
华为Matebook 13双系统实战:Win10与Ubuntu 16.04无缝共存指南
1. 为什么选择华为Matebook 13安装双系统 作为一名长期使用双系统开发的工程师,我最近在华为Matebook 13上成功部署了Win10Ubuntu 16.04双系统组合。这款13英寸的轻薄本确实给了我不少惊喜——2K全面屏、1.3kg超轻机身、第八代i5处理器,这些硬件配置对于…...
Spring Boot 与 Serverless 集成最佳实践
Spring Boot 与 Serverless 集成最佳实践 引言 大家好,今天想和大家聊聊 Spring Boot 与 Serverless 的集成。Serverless 是一种云原生的计算模型,它允许开发者专注于代码开发,而不需要管理服务器基础设施。在 Spring Boot 应用中,…...
告别bypy上传失败!用Aria2+百度云直链脚本,让服务器下载速度飙升5倍
告别bypy上传失败!用Aria2百度云直链脚本,让服务器下载速度飙升5倍 如果你经常需要将百度网盘中的大文件(比如几十GB的机器学习模型或数据集)传输到服务器上,一定对bypy的种种限制深有体会——速度慢、不稳定、大文件容…...
保姆级教程:用SolidWorks和PCL把装配体转成PCD点云(附完整命令)
从SolidWorks装配体到PCL点云的完整转换指南 在工业设计、逆向工程和三维视觉处理领域,将CAD模型转换为点云数据是一个常见但容易出错的过程。许多工程师和研究人员在使用SolidWorks完成设计后,需要将装配体转换为点云格式(如PCD)…...
Llama-3.2V-11B-cot部署教程:WSL2环境下双4090识别与分配验证
Llama-3.2V-11B-cot部署教程:WSL2环境下双4090识别与分配验证 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡4090环境进行了深度优化,特别适合在WSL2环境下部署使用。通过本教程…...
PHP 8.5 升级生存指南:避免凌晨两点回滚的检查清单
定目标版本,定义内部支持策略在动 CI 或 Composer 之前,先回答一个问题:在你的组织里,这次升级"完成"意味着什么?确定目标和截止日期PHP 分支有两年的活跃支持,然后是两年的安全修复。官方支持表…...
【悬疑言情小说推荐】《血语玫瑰》
《血语玫瑰》国际标准书号:ISBN:978-986-6364-30-3 作者:追月逐花 本书地址:http://e.dangdang.com/products/1901197341.html 每个女孩都期待男友年轻英俊、家境优渥、学识出众,而 “魔鬼” 恰好符合所有条件&…...
wan2.1-vae开源可部署:支持国产操作系统(麒麟/UOS)的适配方案
wan2.1-vae开源可部署:支持国产操作系统(麒麟/UOS)的适配方案 1. 平台介绍 muse/wan2.1-vae 文生图是基于 Qwen-Image-2512 模型的AI图像生成平台,支持中英文提示词,可生成高质量、高分辨率的图像。该平台特别针对国…...
