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);

});
}) 

實現效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM