常用组件每次使用都要拷不少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" />
手写签名
自动完成
查询选择
流程设计