表单组件
富文本 (tinymce)
// 基础使用
layui.use(['tinymce'], function () {
let tinymce = layui.tinymce;
tinymce.render();
});
// 关闭图片媒体右侧上传按钮
tinymce.render({
file_picker_callback: false
});
// 设置附件按钮展示按钮类型
// 说明: attach=图库, image=临时上传图片, media=临时上传媒体
tinymce.render({
attach: 'attach image media'
});
// 支持的参数: (具体查看tinymce的文档, 这里不在过多描述)
// 默认系统已给处理上传相关的,有调整需求的自行查相关文档和代码
tinymce.render({
'elem': '#content', // 节点
'readonly': 0, // 只读
'suffix': '', // 后缀
'base_url': '', // 上传
'language': 'zh_CN', // 语言
'height': 600, // 高度
'attach': 'attach', // 附件
'plugins': '', // 插件
'toolbar': '', // 展示
... // 更多参数看代码 或 tinymec文档
});
图标选择 (iconPicker)
LayUI拓展组件: 去仓库看看😊
1、参数说明:
| 名称 | 默认 | 说明 |
|---|---|---|
| elem | 无 | 选择器,推荐使用input |
| type | 无 | 数据类型:fontClass/unicode,推荐使用fontClass |
| search | true | 是否开启搜索:true/false,默认true |
| page | false | 是否开启分页:true/false,默认true |
| limit | 12 | 每页显示数量,默认12 |
| cellWidth | 20% | 每个图标格子的宽度:'43px'或'20%' |
| click | 无 | 点击事件,function(data) {...} |
| success | 无 | 渲染成功后的回调,function(d) {...} |
2、使用示例:
<input type="hidden" id="iconPicker" lay-filter="iconPicker">
<input type="hidden" name="icon" value="">
layui.use(['iconPicker'], function () {
let $ = layui.$;
let iconPicker = layui.iconPicker;
// 图标选择
iconPicker.render({
elem: '#iconPicker',
search: true,
page: true,
limit: 12,
cellWidth: '20%',
click: function (data) {
$('input[name="icon"]').val(data.icon);
}
});
// 默认选中
iconPicker.checkIcon('iconPicker', 'layui-icon layui-icon-circle-dot');
});
下拉多选 (xmSelect)
let xm = xmSelect.render({
el: '#category',
data: JSON.parse('{$category|raw}'),
initValue: [1, 2, 4],
theme: {color: '#1e9fff'}
});
配置项
prop
| 名称 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| name | string | name | - | 显示名称 |
| value | string | value | - | 选中值, 当前多选唯一 |
| selected | string | selected | - | 是否选中 |
| disabled | string | disabled | - | 是否禁用 |
| children | string | children | - | 分组children |
| optgroup | string | optgroup | - | 分组optgroup |
theme
| 名称 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| color | string | #009688 | - | 主题颜色 |
| maxColor | string v | #e54d42 | - | 选中上限闪烁边框颜色 |
| hover | string | #f2f2f2 | - | 键盘操作的背景色 |
标签 (inputTags)
源码地址: 增强版
<div class="layui-input-block">
<div class="tags">
<input type="hidden" name="tags">
<input type="text" id="tags" placeholder="回车输入标签">
</div>
</div>
layui.use(['form', 'tinymce', 'xmSelect', 'inputTags'], function () {
let inputTags = layui.inputTags;
// 基础的使用
inputTags.render({elem: '#tags', openFlatContent: true});
// 其它使用方式
inputTags.render({
elem:'#phase',
content: ['期'],
pinArray: ['期'],
openFlatContent: true,
aldaBtn: false,
done: function(){
structShield.phase=this.content;
}
})
});
工具 (zeUtil)
// 请求
zeUtil.ajax(options);
// 弹窗1
zeUtil.popup(options);
// 弹窗2
zeUtil.pages(options);
// 事件
zeUtil.event(options);
// 搜索
zeUtil.search(options);
// 表格
zeUtil.table(options);
// 复选
zeUtil.checkbox(options);
// 上传
zeUtil.uploader(options);
// 锁定按钮
zeUtil.locking(this);
// 解锁按钮
zeUtil.unlock(this);
// 截流防抖
zeUtil.debounce(delay, func);
// 过滤对象空字段
zeUtil.filterNullObj(obj);
缓存 (Cache.js)
配置路径: public/static/backend/cache.min.js
// 设置缓存
zeCache.setItem(key, value);
// 获取缓存
zeCache.getItem(key);
// 移除缓存
zeCache.removeItem(key);
// 设置带有效期缓存
zeCache.set(key, value, expire)
// 获取缓存,会校验有效期
zeCache.get(key);
// 移除缓存值
zeCache.remove(key, value);
// 清空所有缓存
zeCache.clear(key, value);
配置 (Config.js)
配置路径: public/static/backend/config.min.js
let zeConfig = {
// 默认主题
theme: 'default',
// 是否隐藏标签菜单
isTabHidden: false,
// 是否开启标签记忆
isTabMemory: false,
// 是否开启切换刷新
isTabRefresh: false
}
图标库 (Icon)
提示
实在没有那么多时间一个个的处理图标写文档
直接先安排图片参考,将就一下吧😊
参考图片
![]()
