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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3249694.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

PHP基础语法(一)

一、初步语法 1、PHP代码标记&#xff1a;以 <?php 开始&#xff0c;以 ?> 结束&#xff1b; 2、PHP注释&#xff1a;行注释&#xff1a;//&#xff08;双斜杠&#xff09;或# 块注释&#xff1a;/* */ 3、PHP语句分隔符&#xff1a; 1&#xff09;在PHP中&#…

机器人及其相关工科专业课程体系

机器人及其相关工科专业课程体系 前言传统工科专业机械工程自动化/控制工程计算机科学与技术 新兴工科专业智能制造人工智能机器人工程 总结Reference: 前言 机器人工程专业是一个多领域交叉的前沿学科&#xff0c;涉及自然科学、工程技术、社会科学、人文科学等相关学科的理论…

C++:类和对象 III(初始化列表、explicit、友元、匿名对象)

目录 初始化列表 初始化列表的特点 类型转换、explicit 隐式类型转换 explicit关键字 static成员 静态成员变量 静态成员函数 友元 友元函数 友元类 内部类 匿名对象 编译器优化 初始化列表 初始化列表就是类成员初始化的地方 函数有它声明和定义的地方&#x…

xFormers - Transformers 加速研究的工具箱

文章目录 一、关于 xFormers特点 二、安装xFormers三、Benchmarks&#xff08;可选&#xff09;测试安装 四、使用xFormers1、Transformers 关键概念2、Repo map3、主要特点4、安装故障排除 一、关于 xFormers xFormers是一个基于PyTorch的库&#xff0c;其中包含灵活的Transf…

Java_MyBatisPlus

MyBatisPlus属于是MyBatis的拓展&#xff0c;不影响原MyBatis框架下的代码运行&#xff0c;并对MyBatis框架进行拓展及优化。 使用步骤&#xff1a; 注意&#xff1a;继承BaseMapper时要填写泛型为要操作的实体类。 基本原理&#xff1a; MyBatisPlus通过扫描实体类&#xff…

adb查看网卡信息,并修改网卡mac地址

这种方法修改mac后&#xff0c;关机后会失效! 文章结尾有永久修改mac地址的方法! 1. 查看网卡的信息&#xff0c;以及mac地址&#xff0c;ip地址&#xff0c;子网掩码等 //查看所有网卡信息adb shell ifconfig//MAC地址&#xff1a; HWaddr 5e:2c:e9:58:3e:4f //IP地址&a…

安全防御拓扑2

实验拓扑&#xff1a;​​​​​​​ 要求&#xff1a; 1、办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 2、分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 3、多出口环境基于带宽比例进行…

Django定时任务框架django-apscheduler的使用

1.安装库 pip install django-apscheduler 2.添加 install_app django_apscheduler 3.在app下添加一个task.py文件&#xff0c;用来实现具体的定时任务 task.pydef my_scheduled_job():print("这个任务每3秒执行一次", time.time()) 4.在app下创建一个manag…

studio编译报错java.lang.NullPointerException

安卓studio编译报错&#xff0c;这个是一个新建的项目就报错&#xff0c;原因是 implementation androidx.appcompat:appcompat:1.7.0版本太高&#xff0c;修改后版本 implementation androidx.appcompat:appcompat:1.4.0&#xff0c; 编译又报错 18 issues were found wh…

【Node.js】初识 Node.js

Node.js 概念 Node.js 是一个开源与跨平台的 JavaScript运行时环境 &#xff0c;在浏览器外运行 V8 JavaScript 引擎(Google Chrome的内核)&#xff0c;利用事件驱动、非阻塞和异步输入输出 等技术提高性能。 可以理解为 Node.js就是一个服务器端的、非阻塞式 l/O 的、事件驱…

npm install时卡在sill idealTree buildDeps卡着不动

场景&#xff1a;做导出功能的时候要用上xlsx&#xff0c;正常npm install xlsx --save 问题描述&#xff1a;npm install时卡在sill idealTree buildDeps&#xff0c;&#xff0c;卡着不动 过程&#xff1a;在网上一顿百度试过好多种方法 1、切换taobao的镜像地址 npm conf…

Android 使用FFmpeg解析RTSP流,ANativeWindow渲染 使用SurfaceView播放流程详解

文章目录 ANativeWindow 介绍ANativeWindow 的主要功能和特点ANativeWindow 的常用函数工作流程原理图通过ANativeWindow渲染RGB纯色示例 播放RTSP流工作流程图关键步骤解析自定义SurfaceView组件native 层解码渲染 效果展示注意事项 这篇文章涉及到jni层&#xff0c;以及Ffmpe…

设计分享—国外网站设计赏析

今天还是给大家分享一些国外的网站设计案例&#xff5e; 蓝蓝设计是一家专注而深入的界面设计公司&#xff0c;为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平…

来参与“向日葵杯”全国教育仿真技术大赛~

可点击进行了解&#xff1a;“向日葵杯”全国教育仿真技术大赛 (sunmooc.cn) 本次大赛共分为四个赛道&#xff1a;自主命题赛道、教育知识图谱设计赛道、FPGA硬件扑克牌对抗赛道、EasyAR元宇宙空间设计赛道。 参赛对象 &#xff1a; 具有正式学籍的在校研究生&#xff0c;本科…

Memcached介绍与使用

引言 本文是笔者对Memcached这个高性能分布式缓存组件的实践案例&#xff0c;Memcached是一种高性能的分布式内存对象缓存系统&#xff0c;用于减轻数据库负载&#xff0c;加速动态Web应用&#xff0c;提高网站访问速度。它通过在内存中缓存数据和对象来减少读取数据库的次数&…

Postman导出excel文件

0 写在前面 在我们后端写接口的时候&#xff0c;前端页面还没有出来&#xff0c;我们就得先接口测试&#xff0c;在此记录下如何使用postman测试导出excel接口。 如果不会使用接口传参可以看我这篇博客如何使用Postman 1 方法一 2 方法二 3 写在末尾 虽然在代码中写入文件名…

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker)

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker) 本文档详细介绍了在 Ubuntu Server 22.04 上使用 Docker 安装和配置 NVIDIA Container Toolkit 的过程。 概述 NVIDIA 容器工具包使用户能够构建和运行 GPU 加速容器。即可以在容器中使用NVIDIA显卡。 架构图如…

uniapp H5 如何根据接口返回form表单,跳转银联支付界面?

uniapp如何根据form表单&#xff0c;唤醒第三方支付? 文章目录 uniapp如何根据form表单&#xff0c;唤醒第三方支付?效果图实现 效果图 接口返回 form 表单数据 实现 // 例请求成功&#xff0c;返回数据 rechargePay({}).then(res > {// 接收接口返回数据let { result …

= null 和 is null;SQL中关于NULL处理的4个陷阱;三值逻辑

一、概述 1、NULL参与的所有的比较和算术运算符(>,,<,<>,<,>,,-,*,/) 结果为unknown&#xff1b; 2、unknown的逻辑运算(AND、OR、NOT&#xff09;遵循三值运算的真值表&#xff1b; 3、如果运算结果直接返回用户&#xff0c;使用NULL来标识unknown 4、如…

JRT实体视图查询

JRT的设计目标就是多数据库支持&#xff0c;对于爬行周边数据提供DolerGet解决爬取多维数据问题。但是对于通过父表字段筛选子表数据就不能通过DolerGet取数据了&#xff0c;因为查询到的父表数据没有子表数据的ID。 比如下面表&#xff1a; 我需要按登记号查询这个登记号的报…