Layui 自定义图标

1、html

 <div class="layui-input-block" style="width: 230px ;margin-left: 4px">
       <input value="${item.icon!}" type="text" id="iconPicker" lay-filter="iconPicker" class="hide" lay-verify='required' >
    <input id="icon" name="icon" class="layui-input" value="${item.icon!}">
 </div>    

2、js

//layui引入 iconPicker
layui.use(['iconPicker'], function (){

  var iconPicker = layui.iconPicker;
  iconPicker.render({
        // 选择器,推荐使用input
        elem: '#iconPicker',
        // 数据类型:fontClass/unicode,推荐使用fontClass
        type: 'fontClass',
        // 是否开启搜索:true/false,默认true
        search: true,
        // 是否开启分页:true/false,默认true
        page: true,
        // 每页显示数量,默认12
        limit: 12,
        // 点击回调
        click: function (data) {
            $("#icon").val(data.icon);
        },
        // 渲染成功后的回调
        success: function(d) {

        }
    });
  
 $(function() {
//初始化展示
let icon = $("#icon").val();
iconPicker.checkIcon('iconPicker', icon);

});
}) 

实现效果

 

posted @ 2021-08-05 14:14  唏嘘-  阅读(1319)  评论(0编辑  收藏  举报