基于layui的一些自定义组件

常用组件每次使用都要拷不少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=&quot;select0&quot;]').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" />
        

手写签名

自动完成

查询选择

流程设计