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转为…

nacos配置实时刷新@RefreshScope注解和定时任务@Scheduled注解同时使用导致失效问题

RefreshScope和Scheduled的组合使用有时会导致Scheduled任务失效,主要是由于它们在Spring中的工作机制不同。 RefreshScope的工作原理 RefreshScope是Spring Cloud中的一个注解,它允许在应用运行时刷新bean的属性,而不需要重启应用程序。具…

美国空军发布类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…

【React】在 React 组件中,怎么使用useContext

在React中,useContext 是一个Hook,它允许你无需显式地通过组件树的每一层来传递 props,就能将值深入到组件树的任何位置。要使用 useContext,你需要先创建一个 Context 对象,然后使用这个对象提供的 Provider 组件来包裹你的应用中的一部分。然后,任何在这个 Provider 下…

使用R语言生成CDISC SDTM.AE domain

写在前面 - 使用的是Rstudio - 其实R已经有生成sdtm相关的package,以下代码仅作为练习R语言的语法,不是高效生成sdtm的方法 - 代码中没有解决的问题包括:EPOCH相关的逻辑没有考虑partial date的情况;在使用arrange() function做…

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定位技…

C# —— 逻辑运算符

简介 逻辑运算符用来连接多个 bool 类型表达式,实现多个条件的复合判断。 C#中的逻辑运算符包括:逻辑非( ! )、逻辑与( &&、& )、逻辑或( ||、| )。 逻辑与 & 符号 && 并且 规则: 对两个布尔值进行运算 有假则假 同真为真 bo…

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

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

vue面试题九

一、Vue.js如何进行性能优化? Vue.js 的性能优化可以从多个方面入手,以下是一些常见的性能优化策略和方法: 使用生产环境构建: 确保在部署生产环境之前,使用 Vue.js 的生产构建版本。生产构建版本会自动进行代码压缩和…

代理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、初始化过程 修改主机名…

公寓项目-验证码登录模块

文章目录 验证阿 验证阿 使用hutool工具类生成 首先要返回给前端数据 使用一个vo接收 前端接收使用的有 key 还有图片的编码 package com.healer.spzx.service.model.vo.system;import io.swagger.v3.oas.annotations.media.Schema; import lombok.Data;Data Schema(descr…