自定义组件属性配置示例

1 前言

1.1 基础说明

属性名可选值注释
typethis.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,
控件类型
attrNamestring属性名
oneLinetrue,false标题和控件是否在一行
options[n:name(属性名,样式名) t:title(标题) c:checked时候的值(string,boolean) u:unchecked时候的值(string,boolean) dv:defaultValue如果控件未配置此属性,会以此值来暂时显示默认值]可选值
extendtrue,false是否启用扩展配置
extendKey"icon" 
htmlAttrs[{"属性名":"属性值"}]html的标准属性 比如您希望只读 [{"readonly":""}]
validate{"正则表达式":"如果不匹配则弹出提示警告"}validate:{"^[a-zA-Z][a-zA-Z0-9_]*$":"请输入字母数字或者下划线"}
html'<fieldset class="layui-elem-field"><legend>分隔线</legend></fieldset>''与this.type.HTML配合使用方有效 例如 {type:this.type.HTML,html:'<fieldset class="layui-elem-field"><legend>分隔线</legend></fieldset>'}
extra{min:1,max:10}extra:layui组件对应的控件配置
clearAttrtrue,false是否显示删除属性按钮
placeholder“”输入框会生效:提示帮助
tooltip“”鼠标悬停标题弹窗一个帮助文字

 

2 根据官方UI文档来配置

2.1 第一步看官方文档

2.2 把文档中的属性转换成布局器的属性控件来操作

属性名对应布局器的属性控件
type下拉框 下拉 text和textarea
value输入框
maxlength滑块

2.3 以上文档可做个简单的配置如下 放在constant.js的this.rightPanel变量中

 

2.4 打开布局器constant.js 来实战配置 可以参考第1节 1.6

示例1 boolean 类型 属于真假类型 true|false 配置复选框

场景按钮标签的disabled
HTMLtrue : <el-button disabled>按钮</el-button>
false: <el-button>按钮</el-button>
说明disabled的取值是true 或 false 按照html规范当el-button标签不出现disabled时他的值就是false也就是不配做此属性
配置{
type:this.type.CHECKBOX,
clearAttr:true,
oneLine:true,
change:this.change.ATTR,
title:'状态' ,
options:[{n:"disabled",t:"禁用",c:true,u:false}]
},
配置帮助n代表name也就是属性名
t代表title标题
c代表checkedValue选择时的值
u代表unCheckedValue未选择时的值
dv代表defaultValue默认值 如果一些属性默认值为true 选中为false那么可以提前配置dv:true
type:this.type.CHECKBOX与this.type.SWITCH通用的
场景按钮标签的:autofocus
HTMLtrue : <el-button :autofocus="true">按钮</el-button>
false: <el-button>按钮</el-button>
说明:autofocus的取值是"true"此时是字符串 或 false 就是不出现
配置{
type:this.type.CHECKBOX,
clearAttr:true,
oneLine:true,
change:this.change.ATTR,
title:'状态' ,
options:[{n:":autofocus",t:"聚焦",c:"true",u:""}]},
}
配置帮助c此时要配置成"true"字符串而不是true,
u配置成""则代表如果取消选择那么:autofocus=""而我们布局器默认会把这个属性去掉
场景按钮标签的:loading
HTMLtrue : <el-button :loading="true">按钮</el-button>
false: <el-button :loading="false">按钮</el-button>
说明:loading="true"的取值是"true"此时是字符串 或 "false"
配置{
type:this.type.CHECKBOX,
clearAttr:true,
oneLine:true,
change:this.change.ATTR,
title:'状态' ,
options:[{n:":loading",t:"聚焦",c:"true",u:"false"}]},
}
配置帮助c此时要配置成"true"字符串而不是true,
u配置成"false"则代表如果取消选择那么:loading="false"

示例2 string 类型文本内容 配置输入框

场景按钮标签配置文本
HTML<el-button>按钮文本</el-button>
说明我们要配置一个输入框可以修改 按钮文本这四个字
配置{
type:this.type.TEXT ,
clearAttr:true ,
oneLine:true ,
change:this.change.TEXT ,
title:'文本'
}
配置帮助注意change:this.change.TEXT代表改变文本

 

示例3 string string[]类型属性 配置输入框

场景输入框标签配置placeholder
HTML<el-input placeholder="请输入内容"></el-input>
说明字符串类型
配置{
type:this.type.TEXT,
clearAttr:true,
oneLine:true,
change:this.change.ATTR,
title:'提示',
attrName:'placeholder'
}
配置帮助type是控件类型:this.type.TEXT是输入框 与this.type.TEXTAREA是通用的

示例4 string 类型属性 配置下拉框

场景按钮标签配置size 官方给的值有多个medium,small,mini
HTML<el-button size="small">按钮文本</el-button>
说明字符串类型
配置{
type:this.type.SELECT,
clearAttr:true,
oneLine:true,
change:this.change.ATTR,
title:'尺寸',
attrName:'size',
options:[{"medium":"中等","small":"小","mini":"迷你"}]
}
配置帮助type是控件类型:this.type.SELECT是下拉框 基本上有2个字符串可选的时候都应配置下拉框

示例5 string 类型属性 配置颜色选择器

场景评分组件配置颜色值
HTML<el-rate void-color="#cb7878"></el-rate>
说明字符串类型 并且值支持这种#的配置
配置{
type:this.type.COLOR_PICKER,
clearAttr:true,
oneLine:true,
change:this.change.ATTR,
title:'未选中颜色',
tooltip:'未选中 icon 的颜色',
attrName:'void-color'
}
配置帮助type是控件类型:this.type.COLOR_PICKER是颜色选择器
注:可增加颜色选择器的额外配置extra:{}的更多配置可以参考https://www.layui.com/doc/modules/colorpicker.html

示例6 string 类型属性 配置文件上传

场景图片配置地址
HTML<el-image src="/upload/20200312095749_805679.jpg"></el-image>
说明src的文件上传地址和返回请参考constant.js中的this.settings.file配置
file:{
action:env.serverPath+"web/common_file_rest/upload", name:"file",
callback:function (res) {
}}
配置{
type:this.type.FILEUPLOAD,
clearAttr:true,
oneLine:false,
change:this.change.ATTR,
title:'图片地址',
attrName:'src'
}
配置帮助type是控件类型:this.type.FILEUPLOAD是文件上传 注:可增加文件上传的额外配置extra:{}的更多配置可以参考https://www.layui.com/doc/modules/upload.html

示例7 number 类型属性 配置滑动条

场景最小值配置
HTML<el-slider :min="2"></el-slider>
说明数值型的属性配置推荐让用滑动条
配置{
type:this.type.SLIDER,
clearAttr:true,
oneLine:false,
change:this.change.ATTR,
title:'最小值',
attrName:':min',
extra:{min:0,max:20000}
}
配置帮助type是控件类型:this.type.SLIDER是文件上传 注:可增加文件上传的额外配置extra:{}的更多配置可以参考https://www.layui.com/doc/modules/slider.html

示例8 配置html

场景美化右侧分隔之类的配置
HTML 
说明HTML的控件可以自由定义 让属性端展示不同效果 后续考虑增加事件触发
配置{
type:this.type.HTML,
html:'<fieldset class="layui-elem-field layui-elem-title"><legend>标题(title)</legend></fieldset>'
}
配置帮助html属性可以自由放置layui的html内容

示例9 配置array类型

场景复选框组使用
HTML<div default-toolbar="['exports','print']"></div>
说明default-toolbar的取值是数组类型
配置{
type:this.type.CHECKBOX_ARRAY,
clearAttr:true,
oneLine:true,
change:this.change.ATTR,
attrName:'default-toolbar',
title:'右工具栏',
tooltip:"自定义工具栏",
options:[{"c":"filter","n":"","t":"筛选","u":""},{"c":"exports","n":"","t":"导出","u":""},{"c":"print","n":"","t":"打印","u":""}]
}
配置帮助保证n,u为""即可

示例10 配置string类型的图标

场景系统图标使用
HTML<el-button icon="el-icon-info">确定</el-button>
说明图标比较特殊 实现方案需要参考iframe-ui.js的iconList方法
配置{
type:this.type.TEXT ,
clearAttr:true ,
oneLine:true ,
change:this.change.ATTR ,
title:'图标' ,
attrName:'icon',
extendKey:"icon",
extend:true
}
配置帮助extendKey:icon,extend:true配合使用即可弹窗图标列表选择

示例11 配置父子一对多组件

示例11 配置父子一对一组件

示例12 方法的配置 配置输入框

场景输入框标签配置方法
文档click 点击按钮,且按钮状态不为加载或禁用时触发 event: Event
说明字符串类型
配置{
type:this.type.TEXT,
clearAttr:true,
oneLine:false,
change:this.change.ATTR,
title:'点击按钮,且按钮状态不为加载或禁用时触发',
attrName:'@click',extendKey:"method",extend:true
}
配置帮助方法的熟悉前加固定的@,另外配置extendKey:'method',extend:true

示例12 变量的配置 配置输入框

场景输入框标签配置方法
文档v-model 绑定值
说明字符串类型
配置{
type:this.type.TEXT,
clearAttr:true,
oneLine:false,
change:this.change.ATTR,
title:'绑定值',
attrName:'v-model'
}
配置帮助当属性类型名为v-model或者属性类型不是string,number,boolean时需要考虑使用变量配置方式 务必记得tagClassMapping中bind给的默认值配置 bind:{"v-model":"默认值"}

 

示例13 单属性多选值配置 配置CHECKBOX_ARRAY

场景复选框标签配置方法 比如逗号分割
文档attrName 单属性多选值
说明比如:我们希望选择后出来的值是attrName="exports,print"
配置{type:this.type.CHECKBOX_ARRAY,clearAttr:true,oneLine:true,change:this.change.ATTR,attrName:'mc-jdz-zs',title:'取绝对值增速',tooltip:"取绝对值增速",options:[{"c":"jueduizhi","n":"","t":"绝对值","u":""},{"c":"suzeng","n":"","t":"速增","u":""}],callback:{coverAttrValueToArray:function(attrValue,focusNode){return attrValue?attrValue.split(","):[];},parseArrayToAttrValue:function(attrValueArr){return attrValueArr?attrValueArr.join(","):""}}}
配置帮助coverAttrValueToArray:负责把属性值"jueduizhi,suzeng"转成字符串数组,
parseArrayToAttrValue负责把数组["jueduizhi","suzeng"]转成属性字符串逗号分割

示例14 配置style z-index

场景输入框标签z-index
位置 
说明str类型
配置{
type:this.type.TEXT,
clearAttr:true,
oneLine:false,
change:this.change.STYLE,
title:'层级',
attrName:'z-index'
}
配置帮助 

示例15 配置dblClickChange

场景layui的radio
说明obj类型 如果您不配置任何内容 将采取默认方式 修改标签文本,注意以下参数都可以不写 都有默认处理逻辑 attr attrName需要填写
位置this.tagClassMapping
配置"type=radio":{name:"单选框",dblClickChange:{type:"attr",
attrName:"title",
contenteditableElemFn:function(elem){return elem;},
attrValueFn:function(contenteditableElem){return contenteditableElem.find(".layui-unselect").find("div").text();},
contenteditableElemFn:function(elem){return elem;},
textRangeElemFn:function(contenteditableElem){return contenteditableElem.find(".layui-unselect").find("div");}}
}
配置帮助dbClickChange:当我们在界面双击控件时,可以直接输入文本,实现方式就是把控件的contenteditable=true。如果您不配置,则默认修改标签的内容
修改我

其他配置为了让操作体验更加好一些,因为大部分ui都动态生成了各种结构,导致我们操作会有误差。所以可以使用各种方式来纠正
type:'attr' 或者 'text' 或者 '' 三种取值 attr:标识修改属性 text:修改标签内文本 '':不支持操作
attrName:'title' 当type=attr时生效 标识填写的文本最终将被赋值到控件的title属性上 当type='text' 或'' 可以忽略此字段
contenteditableElemFn:返回contenteditable=true的dom结构 入参:当前聚焦的$elem对象
attrValueFn:当我们输入完文字后,需要取出文本 便于设置在后续的节点上 入参:contenteditableElemFn返回的结构对象
textRangeElemFn:双击控件后,我们要设置文本区域的结构为选中状态,入参:contenteditableElemFn返回的结构对象 精准选择更有效的缩小范围

示例16 配置包裹标签

场景输入框标签tmpWrap相关配置
位置this.tagClassMapping
说明tmpWrapTag:'div',tmpWrapType:0,tmpWrapShade:true
配置"iframe": {name:"网页",dragInto:false,assistDelete:false,assistAdd:false,assistDuplicate:false,duplicate:true,
duplicateAttr:[], copy:true, paste:false, canDelete:true ,tmpWrapTag:'div',tmpWrapType:0,tmpWrapShade:true }
配置帮助比如网页控件 当我们要拖拽时,由于网页本身内容是可以点击的,此时无论是拖拽 选中 更改大小 操作体验都大打折扣,此时我们可以考虑加个蒙版
tmpWrapTag:'div' 先用一个div标签包裹起来f12可以看下layui的很多结构都是跟原始结构平行 导致拖拽控件 无法一同移走 所以把它包裹起来
tmpWrapType:0 尽量保证源码区域无临时包裹标签 1则代表源码区域也有临时包裹标签 主要应对ui生成的动态结构 跟元素结构是平级的
tmpWrapShade:true 是否用蒙版蒙住控件操作 体验很好 但是会影响点击效果