自定义组件和属性

视频教程 :自定义组件 https://edu.csdn.net/course/play/10747/442806

一个.vue模块化开发同时又能打包成js集成到magicalcoder的示例

1 参考示例 constant.js

2 配置解析

2.1 第一步 配置this.components 则会自动出现在左侧拖拽区域 icon也可以取样式名称 https://remixicon.com/ 这里开源图标可以直接使用

2.2 第二步 配置this.tagClassMapping 影响导航树 控件展现行为等

名称说明类型取值默认值
dragInto是否允许拖拽插入其他元素booleantrue|false 
duplicate否允许向下复制booleantrue,false 
duplicateAttr向下复制需要重新给一个新的属性值 比如id 因为全局不允许重复idarray['id'] 
assistAdd鼠标悬停辅助新增孩子按钮booleantrue,false 
assistDuplicate鼠标悬停辅助向下复制按钮booleantrue,false 
assistDelete鼠标悬停辅助删除按钮booleantrue, 
assistZoom鼠标悬停辅助缩放按钮booleantrue, 
canDragResize当前控件是否允许拖拽宽高booleantrue,false 
canNotOperate当前控件是否允许拖拽booleantrue,false 
canZoom是否允许缩放booleantrue,false 
canDelete是否允许删除此节点booleantrue,false 
copy是否允许拷贝此节点操作booleantrue,false 
paste是否允许其他结构粘贴进来booleantrue,false 
onlyParents只能插入到哪些父结构下array['identifier'] 
rejectParents拒绝插入到哪些父结构下array['identifier'] 
onlyChildren只接受哪些孩子结构插入进来array['identifier'] 
rejectChildren拒绝接受哪些孩子结构插入进来array['identifier'] 
dblClickChangeAttr双击控件,修改的内容,是改变文本或属性,不配置默认改文本,''表示当前控件不支持此功能 @2.2.9.2string'title' 
childrenLimit能接受多少个孩子结构插入进来number1 
bind用于vue的动态绑定参数名,针对一些控件必须绑定数据才行否则vue报错 key是属性名 value是默认给的值 value一定是字符串 预设值加双引号即可object{"v-model":"[]"} 
addOneItems新增一个条目 ctrl+i array key:新增到哪个identifier下,空表示当前节点的children下 value:有时会新增多个自孩子,html:要添加进去的孩子结构 focus代表添加后是否聚焦孩子array[{"":[{html:"单选项1",focus:false}]}] 
treeExtraName额外追加到导航树的内容 attr:当前结构的属性名的值 text:是否追加第一个文本内容 booleanobject{attr:['id'],text:true} 
primary权限 当一个结构上出现了多种可能(标签名 样式名 属性名=属性值)的identifier映射 如何确定用哪一个,此时可以使用primary,数值越大权限越高 高权限会覆盖低权限的节点 成为默认首选 例如: 那如果出现以下配置 到底哪个才应该被选用节点呢 "test":{name:"测试"} "a":{name:"超链接"} 此时我们可以这么配置 如果我们点击工作区结构 则test可被优先选为节点 其他情况则使用a超链接节点 "test":{primary:1,name:"测试"} "a":{name:"超链接"}int1 
tmpWrapTag临时包裹标签 有些结构被layui写的是平级 放在了元素标签下面 这样拖拽插件就察觉不到 此时需要我们包裹一个临时标签 比如select layui-table这些string'div' 
tmpWrapClass临时包裹给个样式 空格分开 可以照顾到特殊组件情况包裹内样式展示string'mc-dragging-select mc-dragging-switch' 
tmpWrapType临时包裹标签类型 0:有些结构可以独立存在比如audio但是浏览器不支持拖拽 1:layui的封装框架,但是竟然是平级的,拖拽走了,原始控件还在原处int0 
tmpWrapShade临时包裹内是否加个蒙版:比如audio如果不加拖拽大小事件会侦听不到,但是加了蒙版体验好了 就不能在视图模式点击了booleanfalse 
dblClickChange双击结构可以修改当前元素的内容,不配置则不支持;type:text或者attr或者空字符串 ,text代表文本 attr代表属性,''代表不支持修改,attrName:更改的属性名,attrValueFn:自己处理摘取那一部分文本,contenteditableElemFn:准备设置contenteditable=true的当前结构,不填默认当前聚焦结构 textRangeElemFn:默认被选取一段文本的结构,当我们拖拽鼠标可以选中一段文本,背景变成蓝色,就是用在这里的,可不填默认contenteditableElemFn返回的值objectdblClickChange:{type:"attr",attrName:"title",contenteditableElemFn:function(elem){return elem;},attrValueFn:function(contenteditableElem){return contenteditableElem.find(".el-step__main").text();},textRangeElemFn:function(contenteditableElem){return contenteditableElem;}} 
afterDragDrop当拖拽位置松手后,refresh:true false 是否刷新工作区,主要是优化性能obj{refresh:true}{refresh:false}
afterResize当拖拽宽高松手后,refresh:true false 是否刷新工作区,主要是优化性能obj{refresh:true}{refresh:false}

 

2.3 配置this.rightPanel 则控制右侧属性

属性名可选值注释
type this.type.TEXT,
this.type.TEXTAREA,
this.type.SELECT,
this.type.CHECKBOX,
this.type.SWITCH,
this.type.COLOR_PICKER,
this.type.CHECKBOX_ARRAY,
this.type.FILEUPLOAD,
this.type.HTML,
this.type.SLIDER,
控件类型
change this.change.ATTR:修改属性
this.change.CLASS:修改class属性
this.change.TEXT:修改文本
this.change.STYLE:修改style属性
this.change.MCSTYLE:修改mcstyle属性
修改控件类型 MCSTYLE:我们扩展了一个新属性,存放当前面板的一些特性,但是跟标签渲染属性完全无关(比如锁定,组合等等特性 主要用于操作布局器时体现)
attrNamestring属性名
oneLinetrue,false标题和控件是否在一行
options[n:name(属性名,样式名) t:title(标题 为空字符串则不显示) c:checked时候的值(string,boolean) u:unchecked时候的值(string,boolean) dv:defaultValue如果控件未配置此属性,会以此值来暂时显示默认值]可选值
extendtrue,false是否启用扩展配置
extendKey"icon"打开callback.js 找到extend_config方法阅读一下
htmlAttrs[{"属性名":"属性值"}]html的标准属性 比如您希望只读 [{"readonly":""},{"disabled":"true"}]
validate{"正则表达式":"如果不匹配则弹出提示警告"}validate:{"^[a-zA-Z][a-zA-Z0-9_]*$":"请输入字母数字或者下划线"} 注意正则写法以^$包裹才能完全匹配
html'
分隔线''
与this.type.HTML配合使用方有效 例如 {type:this.type.HTML,html:'
分隔线'}
extra{min:1,max:10}extra:layui组件对应的控件配置
clearAttrtrue,false是否显示删除属性按钮
callbackcallback:{coverAttrValueToArray:function(attrValue,focusNode){return ['print'];},parseArrayToAttrValue:function(attrValueArr){return JSON.stringify(attrValueArr)}}各种回调 下面是2个示例
callbackcallback:{coverAttrValueToArray:function(attrValue,focusNode){return ['print'];}}当类型是CHECKBOX_ARRAY 回调 请把attrValue转成字符串数组返回 从而实现属性各种多项场景的配置
callbackcallback:{parseArrayToAttrValue:function(attrValueArr,focusNode){return JSON.stringify(attrValueArr)}}当类型是CHECKBOX_ARRAY 回调 请把字符串数组转成实际的配置返回 从而实现属性各种多项场景的配置
callbackcallback:{coverValueToAttr:function(value,focusNode){return "url(""+value+"")"}}比如backgroud-image时,我们要给图片添加变成这种格式 url("img.jpg") 就可以使用这个callback实现

2.4 参考constant.js中已经配置的各种场景组件

2.5 js初始化 具体位置在iframe-ui.js中

2.6 自定义echarts组件示例

2.6.1 步骤

2.6.2 显式初始化

2.6.3 隐式初始化

2.6.4 进阶动态从后端拿到数据 初始化到echarts

关于echarts组件,我们已经重新改造,采用隐式初始化,代码都在ui/magicalcoder.js,单独一章节介绍如何联动后端来初始化echarts组件 也可以咨询我们获取相关成品示例