toom1996/backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
root
2025-06-18 10:31:43 +08:00
commit d9f820b55d
981 changed files with 449311 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
public/demos/document/iconPicker.html Executable file
View File

@ -0,0 +1,244 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">开发环境</div>
<div class="layui-card-body">
IconPicker 提供图标选择功能
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
&lt;link rel="stylesheet" href="component/pear/css/pear.css" /&gt;
并
&lt;script src="component/layui/layui.js"&gt;&lt;/script&gt;
并
&lt;script src="component/pear/pear.js"&gt;&lt;/script&gt;
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
默认图标
</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" id="iconPicker" value="layui-icon-face-smile" lay-filter="iconPicker" class="hide">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['iconPicker'], function() {
var iconPicker = layui.iconPicker;
iconPicker.render({
elem: '#iconPicker',
type: 'fontClass',
search: true,
page: true,
limit: 16,
click: function(data) {
console.log(data);
},
success: function(d) {
console.log(d);
}
});
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">默认选中</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" id="iconPicker2" value="layui-icon-face-smile-fine" lay-filter="iconPicker2">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['iconPicker'], function() {
var iconPicker = layui.iconPicker;
iconPicker.render({
elem: '#iconPicker2',
type: 'fontClass',
search: true,
page: true,
limit: 16,
click: function(data) {
console.log(data);
},
success: function(d) {
console.log(d);
}
});
});
</pre>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">不分页</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" id="iconPicker3" value="layui-icon-face-smile-fine" lay-filter="iconPicker3">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-collapse">
<div class="layui-colla-item">
<h2 class="layui-colla-title">显示代码</h2>
<div class="layui-colla-content">
<pre class="layui-code" lay-encode="true">
layui.use(['iconPicker'], function() {
var iconPicker = layui.iconPicker;
iconPicker.render({
elem: '#iconPicker',
type: 'fontClass',
search: true,
page: false,
limit: 16,
click: function(data) {
console.log(data);
},
success: function(d) {
console.log(d);
}
});
});
</pre>
</div>
</div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
layui.use(['iconPicker', 'form', 'layer', 'code','element'], function() {
var iconPicker = layui.iconPicker,
form = layui.form,
layer = layui.layer,
$ = layui.$;
layui.code();
iconPicker.render({
// 选择器，推荐使用input
elem: '#iconPicker',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false，默认true
search: true,
// 是否开启分页：true/false，默认true
page: true,
// 每页显示数量，默认12
limit: 16,
// 点击回调
click: function(data) {
console.log(data);
},
// 渲染成功后的回调
success: function(d) {
console.log(d);
}
});
iconPicker.render({
// 选择器，推荐使用input
elem: '#iconPicker2',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页
page: true,
// 每页显示数量，默认12
limit: 16,
// 点击回调
click: function(data) {
console.log(data);
},
// 渲染成功后的回调
success: function(d) {
console.log(d);
}
});
iconPicker.render({
// 选择器，推荐使用input
elem: '#iconPicker3',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页
page: false,
// 每页显示数量，默认12
limit: 16,
// 点击回调
click: function(data) {
console.log(data);
},
// 渲染成功后的回调
success: function(d) {
console.log(d);
}
});
});
</script>
</body>
</html>