自定义组件属性配置示例

1 前言


xxxxxxxxxx
最好的配置示例可以参考我们已经配置的ui

1.1 基础说明


xxxxxxxxxx
自定义属性的控制在constant.js的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,	控件类型
attrName	string	属性名
oneLine	true,false	标题和控件是否在一行
options	[n:name(属性名,样式名) t:title（标题） c:checked时候的值(string,boolean) u:unchecked时候的值(string,boolean) dv:defaultValue如果控件未配置此属性，会以此值来暂时显示默认值]	可选值
extend	true,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组件对应的控件配置
clearAttr	true,false	是否显示删除属性按钮
placeholder	“”	输入框会生效:提示帮助
tooltip	“”	鼠标悬停标题弹窗一个帮助文字

2 根据官方UI文档来配置

2.1 第一步看官方文档


xxxxxxxxxx
属性名       属性类型      可取值             说明
type        string      text|textarea      类型
value       string/number                 绑定值
maxlength   number                       最大长度

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

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

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


xxxxxxxxxx
    {
        type:this.type.SELECT,
        clearAttr:true,
        oneLine:true,
        change:this.change.ATTR,
        title:'类型',
        attrName:'type',
        options:[{"text":"输入框","textarea":"文本框"}]
    }
    {
        type:this.type.TEXT,
        clearAttr:true,
        oneLine:true,
        change:this.change.ATTR,
        title:'绑定值',
        attrName:'value'
    }
    {
        type:this.type.SLIDER,
        clearAttr:true,
        oneLine:false,
        change:this.change.ATTR,
        title:'最大长度',
        attrName:'maxlength',
        extra:{min:0,max:100}
    }

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

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

场景	按钮标签的disabled
HTML	true : <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
HTML	true : <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
HTML	true : <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配合使用即可弹窗图标列表选择点击扩展配置按钮会回调到callback.js的 MagicalCallback.prototype.extend_config = function (param) {}

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


xxxxxxxxxx
比如我们看到如下一个控件 一个van-grid包含了多个van-grid-item
可无限增加van-grid-item 那我们该如何配置此种情况呢
<van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>


xxxxxxxxxx
第一步：首先 咱们先定义一个左侧的控件 注意咱们不用配置2个 因为van-grid-item脱离了van-grid无法独立存在 那他就不能出现在左侧
this.components=[
        {
            name:"示例",
            children:[
                {
                    name:"宫格",
                    icon:"assets/drag/img/left/other1.png",
                    html:"<van-grid><van-grid-item text='文字'></van-grid-item>\</van-grid>"
                }
            ]
        }
]


xxxxxxxxxx
第二步: 父子关系需要咱们来绑定一下
onlyChildren:[],我的孩子key  addOneItems:[] 增加子节点功能点击一下就能自己应该van-grid-item
onlyParents:[] 我的父亲key
其他属性请参考组件实际情况来添加
this.tagClassMapping = {
    "van-grid":     {name:"行",canZoom:true,assistZoom:true,assistDelete:true,assistAdd:true,assistDuplicate:true,dragInto:true,duplicate:true,duplicateAttr:[],copy:true,paste:false, canDelete:true,onlyChildren:["van-grid-item"],addOneItems:[{"":[{html:"<van-grid-item text='文字'></van-grid-item>",focus:false}]}]     },
    "van-grid-item":{name:"列",canZoom:true,assistZoom:true,dragInto:true,duplicate:true,duplicateAttr:[],copy:false,paste:true, canDelete:true,assistDelete:true,onlyParents:["van-grid"]                                                               },
}


xxxxxxxxxx
第三步:配置父子关系的熟悉 父子组件都要配置
this.rightPanel=[
            {
                title:"属性",
                active:false,/*默认聚焦*/
                width:"50%",
                content:{
                    "van-grid":[
                        //这里就参考文档来做属性吧
                    ],
                    "van-grid-item":[
                        //这里就参考文档来做属性吧
                    ],
                }
            }
        ]

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


xxxxxxxxxx
例如：
<html>
    <head></head>
    <body></body>
</html>
这里与一对多基本上一致，唯一的不同在于 每个类型的子组件只能是一个，那么assistAdd和addOneItems就不用配置了 因为增加一个子节点就破坏了一对一的关系

示例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 是否用蒙版蒙住控件操作体验很好但是会影响点击效果

示例17 自定义属性控件

场景	当默认的右侧属性控件不满足，我们需要自定义
位置	this.rightPanel：可以参考element的mc-root的配置注释掉的参考一下
说明	可以采用直接返回固定html 也可以使用callback.htmlCallback函数返回html
配置	方式1：{type:this.type.HTML,html:'<a class="layui-btn zdyd1">自定义属性1</a>'},方式2：{type:this.type.HTML,callback:{htmlCallback:function(config,focusNode){return '<a class="layui-btn zdyd2">自定义属性2</a>'}}},
配置帮助	那么自定义属性如果遇到事件怎么写呢：请打开callback.js的MagicalCallback.prototype.pre_build_attrs 内部注释部分的写法，因为当渲染完右侧属性后，我们才可以注册事件。自定义属性您可以直接用layui的写法，当然也可以自己在组件，请提前在index-xxx.html引入。htmlCallback的两个参数config:当前属性配置，focusNode:当前操作节点，可以利用此参数获取已经配置的值，然后在html组装里返回默认值

示例18 封装vue的父子组件 slot

我们经常要封装一下vue的组件，然后组成一个新的组件，那如何处理带父子组件的场景呢？

比如我封装一个远程下拉组件注意看slot标签是重点


xxxxxxxxxx
Vue.component('remote-select', {
template: `
    <el-select v-bind="$attrs" v-on="$listeners">
        <el-option v-for="(item,idx) in selectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        <slot/>
    </el-select>
`,
props: ["remoteUrl"],
data: function() {
    return {
        selectList:[]
    }
},
created: function(){     },
mounted: function() {
    var _this = this;
    if(this.remoteUrl){
        axios.get(this.remoteUrl).then(function (response) {
            var data = response.data;
            _this.selectList=data.data;
        }).catch(function (error) {
            console.log(error);
        });
    }
},
methods: {
    
},
watch:{
}})

组件定义：


xxxxxxxxxx
            {
                name:"远程下拉",
                icon:"ri-line-chart-line",
                html:"<remote-select v-model='sss' @focus='focus' remote-url='assets/my/components/select/data/a.json'></remote-select>"
            }

重点讲解：注意看下面配置 remote-select也是支持el-option的，这取决于我们定义组件时的具体可参考vue的slot知识


xxxxxxxxxx
<remote-select style="position: absolute; left: 8.59873%; top: 16.1429%;" v-model="sss" @focus="focus" remote-url="assets/my/components/select/data/a.json">
    <el-option id="uuid0f68758e-5776-40f0-9416-1cc57ce7839e" label="选择1" value="uuid5e5a8267-b83c-49ca-9b93-8c9f9390ec58"></el-option>
</remote-select>

扩展：如果我们要封装el-table组件，并且让它支持el-table-column 那是不是就更加灵活了。

自定义组件属性配置示例

1 前言

1.1 基础说明

2 根据官方UI文档来配置

2.1 第一步看官方文档

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

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

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

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

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

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

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

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

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

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

示例8 配置html

示例9 配置array类型

示例10 配置string类型的图标

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

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

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

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

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

示例14 配置style z-index

示例15 配置dblClickChange

示例16 配置包裹标签

示例17 自定义属性控件

示例18 封装vue的父子组件 slot

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

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

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

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

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

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

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

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

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

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

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

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