常用组件每次使用都要拷不少js代码,维护麻烦,封装一下,下次调用可以少拷很多代码,给大家提供个思路,也方便自己使用时参考,以下组件主要基于layui进行扩展。
下拉框
<select lay-options="{
upfilter:'select0', //上级联动lay-filter
selected:'idcard', //初始值
url:'/' //数据url
,data:{ //ajax请求提交的数据
dtype:'dict' //后台请求数据查询条件(可以任意设置)
,did:'a56a2027cc7041d5ac3e5cef830dc203' //后台请求数据查询条件(可以任意设置)
,text:'name' //下拉框文本数据列名
,value:'value' //下拉框值数据列名
,dat1:layui.$('[lay-filter="select0"]').val() //联动时动态获取上级下拉框选中值
}
}" lay-search="">
<option value="" lock="">请选择</option>
</select>
日期选择
<input class="layui-input datetimeinput" value="" range="1" format="yyyy-MM-dd" />
<input class="layui-input datetimeinput" value="" format="yyyy-MM-dd HH:mm" />
<input class="layui-input datetimeinput" value="2023" format="yyyy" stype="year" />
<input class="layui-input datetimeinput" value="07" format="MM" stype="month" />
颜色选择
不显示输入框
<input class="layui-input colorpicker" value="" format="hex" />
<input class="layui-input colorpicker" value="" format="rgb" />
<input class="layui-input colorpicker" value="" format="rgba" />
<input class="layui-input colorpicker" type="hidden" value="" format="hex" />
手写签名
自动完成
查询选择
流程设计