DDei在线设计器-属性编辑器

DDei-Core-属性编辑器

  DDei-Core-属性编辑器插件包含了文本大文本数值下拉单选勾选以及颜色等属性编辑。

  图形属性共同构成一个完整的定义,属性编辑器就是编辑属性值的控件。当选中图形实例时,属性面板就会展现当前实例的所有属性以及属性编辑器

  如需了解详细的API教程以及参数说明,请参考DDei文档

在这里插入图片描述

文本

  文本类型的属性编辑器,显示为一个文本框。

在这里插入图片描述

基本信息

编辑器名称text
类名DDeiCoreTextPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreTextPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreTextPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'code',   //编码标识,唯一'name': '编码',    //名称'desc': '控件在业务上的唯一编码,缺省和控件ID一致', //说明'controlType': 'text', //属性编辑器,引用编辑器名称 // [!code focus:1]'dataType': 'string',  //数据类型'defaultValue': '编码001', //缺省值
}

大文本

  文本类型的属性编辑器,显示为一个大文本框。

在这里插入图片描述

基本信息

编辑器名称textarea
类名DDeiCoreTextAreaPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreTextAreaPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreTextAreaPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'text','name': '文本','desc': '控件的主体显示文本','controlType': 'textarea',  // [!code focus:1]'defaultValue': '','dataType': 'string','type': [1, 2], //类别,1图形,2业务,3事件'readonly': true,
},

数值

  文本类型的属性编辑器,由区域选择框以及一个文本框构成。

在这里插入图片描述

基本信息

编辑器名称range
类名DDeiCoreRangePropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreRangePropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreRangePropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'fmt.nscale','name': '小数位数','desc': '格式化小数位数','controlType': 'range', // [!code focus:1]'min': 0,'max': 5,'dataType': 'integer','defaultValue': 0,'type': [1, 2]
},

下拉

  用于在一组值中选择单个值,显示为一个下拉框。

在这里插入图片描述

基本信息

编辑器名称combox
类名DDeiCoreComboxPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreComboxPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreComboxPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'fmt.mmark','name': '货币符号','desc': '显示货币符号','controlType': 'combox', // [!code focus:1]'dataSource': [{ 'text': '无', 'value': '' }, { 'text': '人民币', 'value': '¥' }, { 'text': '美元', 'value': '$' }, { 'text': '欧元', 'value': '€' }, { 'text': '英镑', 'value': '£' }, { 'text': '日元', 'value': '¥' }, { 'text': '卢布', 'value': '₽' }, { 'text': '法郎', 'value': '€' }],'defaultValue': '','dataType': 'string','type': [1, 2],'itemStyle': { width: 80, height: 25, col: 2, row: 0, imgWidth: 20, imgHeight: 20 },
}

单选

  用于在一组值中选择单个值,显示为一组单选框。

在这里插入图片描述

基本信息

编辑器名称radio
类名DDeiCoreRadioPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreRadioPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreRadioPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'border.type','name': '边框类型','desc': '用来快速选择边框的类型,以便于套用相关的样式','controlType': 'radio', // [!code focus:1]'dataType': 'string','dataSource': [{ 'text': '无线条', 'value': 0 }, { 'text': '实线', 'value': 1 }],'defaultValue': 1,'hiddenTitle': true,'display': 'column','cascadeDisplay': { 1: { show: ["border.color", "borderOpacity", "borderWidth", "borderDash", "borderRound"], hidden: [] }, default: { show: ["border.color", "borderOpacity", "borderWidth", "borderDash", "borderRound"], hidden: [] }, empty: { hidden: ["border.color", "borderOpacity", "borderWidth", "borderDash", "borderRound"] } },
}

勾选框

  用于是/否这种二选一式的选择,显示为一个带勾的复选框。

在这里插入图片描述

基本信息

编辑器名称switch-checkbox
类名DDeiCoreSwitchCheckboxPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreSwitchCheckboxPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreSwitchCheckboxPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'textStyle.lockWidth','name': '锁定宽度','desc': '超范围自动扩展的情况下锁定宽度','controlType': 'switch-checkbox', // [!code focus:1]'dataType': 'integer','defaultValue': 0,'hiddenTitle': true,'display': 'column','type': [1, 2]
}

颜色选择

  用于颜色选择,显示为一个下拉框,点击弹出颜色选择弹框。

在这里插入图片描述

基本信息

编辑器名称color-combo
类名DDeiCoreComboxPropEditor
类别PropertyEditor

安装

  本插件缺省包含在DDei包中,可以直接使用。如果不需要修改默认图形属性,则可以省略下面两个步骤。

  本插件不能通过插件名使用,且只能出现在extensions第一级。

引入

import { DDeiCoreComboxPropEditor } from "ddei-editor";

使用

extensions: [......//导入插件  // [!code ++:2]DDeiCoreComboxPropEditor
],

属性配置

//在图形的属性配置中,通过编辑器名称引用插件
{'code': 'textStyle.bgcolor','name': '文字背景','desc': '文本的背景颜色','controlType': 'color-combo',  // [!code focus:1]'dataType': 'string','defaultValue': '',
}

仓库信息

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

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

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

技术支持

QQ:3697355039     邮箱:3697355039@qq.com

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

m4s转mp3——B站缓存视频提取音频

前言 しかのこのこのここしたんたん(鹿乃子乃子虎视眈眈)非常之好,很适合当闹钟,于是缓存了视频,想提取音频为mp3 直接改后缀可乎?格式转换工具? 好久之前有记录过转MP4的: m4s转为…

美国空军发布类ChatGPT产品—NIPRGPT

6月11日,美国空军研究实验室(AFRL)官网消息,空军部已经发布了一款生成式AI产品NIPRGPT。 据悉,NIPRGPT是一款类ChatGPT产品,可生成文本、代码、摘要等内容,主要为为飞行员、文职人员和承包商提…

文件没有权限问题:cannot create /opt/apollo/neo/data/log/monitor.log: Permission denied

问题描述 执行 aem bootstrap start --plus 命令启动 Dreamview 提示错误: /bin/sh: 1: cannot create /opt/apollo/neo/data/log/monitor.log: Permission denied [ERROR] Failed to start Dreamview. Please check /opt/apollo/neo/data/log/dreamview.log or /op…

ArrayList和LinkedList的区别!!!

总结: 1、数据结构的实现 ArrayList:动态数组。 LinkedList:双向链表。 2、时间复杂度不同 ArrayList:O(1) LinkedList: O(n) ①:随机访问---- ArrayList > LinkedList (ArrayList采用下标&#xff0…

ARM-V9 RME(Realm Management Extension)系统架构之调试

安全之安全(security)博客目录导读 本节中,“RMSD外部调试”一词用于描述任何系统或PE的外部调试功能,这些功能能够实现以下目的: 监控或修改RMSD行为。对Realm PAS或Realm安全状态的外部访问。 本节中,“Root外部调试”一词用于…

C++ 实现HTTP的客户端、服务端demo和HTTP三方库介绍

本文使用C模拟实现http的客户端请求和http的服务端响应功能,并介绍几种封装HTTP协议的三方库。 1、实现简单HTTP的服务端功能 本程序使用C tcp服务端代码模拟HTTP的服务端,服务端返回给客户端的消息内容按照HTTP协议的消息响应格式进行了组装。 demo如…

PC端剪映6.0免vip版本,功能随便用

下载解压后点击“JianyingPro.exe”图标即可使用,使用过程中无需登陆账号。操作很简单。 链接:https://pan.baidu.com/s/14bon1Ta9GOUFyUZDa2X3TA?pwd8h2b 提取码:8h2b

采用ava+B/S架构开发的工业级UWB(Ultra-Wideband)室内定系统源码UWB定位系统技术接口及技术特点

采用avaB/S架构开发的工业级UWB(Ultra-Wideband)室内定系统源码UWB定位系统技术接口及技术特点 UWB(Ultra-Wideband)定位技术本身并不直接连接蓝牙或其他无线通信技术进行定位。然而,在实际应用中,UWB定位技…

怎么用住宅代理IP?使用住宅代理IP有哪些好处?

如何使用住宅代理IP: 使用住宅代理IP主要涉及以下几个步骤: 选择合适的代理IP供应商: 考虑供应商的可靠性、代理IP的质量、速度、稳定性以及价格。选择信誉良好且服务稳定的供应商,确保获得高质量的代理IP服务。配置代理IP&#…

代理IP常见问题解答,新手必看手册

代理IP在互联网数据收集和业务开展中发挥着重要作用,它充当用户客户端和网站服务器之间的“屏障”,可以保护用户的真实IP地址,并允许用户通过不同的IP地址进行操作。然而,在使用代理IP的过程中,用户经常会遇到一些问题…

vue 中多个表单元素控一个校验规则

1. 场景一 <el-form-itemlabel"确认时长方式"prop"preSubResourceDurationDay" ><div class"confirmDurationDay">最晚使用日期前<el-input-numberv-model"form.preSubResourceDurationDay":precision"0"cla…

axure使用中继器画柱状图

源文件在顶部。 在axure通过读取中继器中的数据来画柱状图&#xff0c;如下图&#xff1a; 1&#xff09;创建一个中继器&#xff0c;在里面创建两列&#xff1a;1列是柱状图底部的名称、2列是柱的高度&#xff0c;如下图&#xff1a; 2&#xff09;双击中继器&#xff0c;画一…

ansible安装wordpress

1.回顾 yum安装wordpress 查看别名 [rootlocalhost ~]# type ll ll 是 ls -l --colorauto 的别名设置别名 aliasyum install -y alias ymyum install -y# 使用别名 ym nginx# 取消别名 unalias ym# 基于LNMP做一个wordpressnginx mysql 5.7 PHP 7.4#1、初始化过程 修改主机名…

【code-server】Code-Server 安装部署

Code-Server 安装部署 1.环境准备 可以参考 https://coder.com/docs/code-server/install code-server的安装流程进行安装&#xff0c;主机环境是 Centos7 建议使用 docker 方式进行安装&#xff0c;可能会出现如下报错&#xff0c;需要升级 GNC 的版本&#xff0c;由于影响交…

派能协议,逆变器测试问题记录

问题一&#xff1a;逆变器无法进行逆变 通过抓取逆变器与bms的通讯报文&#xff0c;如下&#xff1a; 根据派能协议&#xff0c;报文标黄的对应充放电状态&#xff0c;30 30对应的数据为0 0&#xff0c;说明充放电状态全部置0&#xff0c;导致逆变器无法逆变。 问题二&#xf…

推荐系统三十六式学习笔记:原理篇.近邻推荐09|协同过滤中的相似度计算方法有哪些?

目录 相似度的本质相似度的计算方法&#xff1a;1、欧式距离2、余弦相似度3、皮尔逊相关度4 、杰卡德&#xff08;Jaccard&#xff09;相似度 总结 相似度的本质 推荐系统中&#xff0c;推荐算法分为两个门派&#xff0c;一个是机器学习派&#xff0c;一个是相似度门派。机器学…

【记录】ChatGLM3-6B大模型部署、微调(一):部署

ChatGLM3介绍 源码连接&#xff1a; ChatGLM3 是智谱AI和清华大学 KEG 实验室联合发布的对话预训练模型。ChatGLM3-6B 是 ChatGLM3 系列中的开源模型&#xff0c;在保留了前两代模型对话流畅、部署门槛低等众多优秀特性的基础上&#xff0c;ChatGLM3-6B 引入了如下特性&#xf…

算法:模拟题目练习

目录 题目一&#xff1a;替换所有的问号 题目二&#xff1a;提莫攻击 题目三&#xff1a;N字形变换 题目四&#xff1a;外观数列 题目五&#xff1a;数青蛙 首先先解释一下模拟算法是什么&#xff0c;其实模拟算法就是题目让我们干什么我们就干什么&#xff0c;思路比较简…

noVNC 小记

1. 怎么查看Ubuntu版本

汽车行驶中是怎么保障轴瓦安全的?

汽车轴瓦是一种用于减少摩擦和支撑转动部件的关键零部件&#xff0c;通常用于发动机的曲轴、凸轮轴等转动部件上。主要作用是减少转动部件之间的摩擦&#xff0c;支撑和保护曲轴、凸轮轴等旋转部件&#xff0c;确保它们在高速旋转时的稳定性和耐用性。 在汽车轴瓦加工过程中&am…