表单组件

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 (图标选择)

源码仓库地址: https://gitee.com/wujiawei0926/iconpicker/

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 (下拉多选)

源码仓库地址: https://gitee.com/maplemei/xm-select

let xm = xmSelect.render({
    el: '#category',
    data: JSON.parse('{$category|raw}'),
    initValue: [1, 2, 4],
    theme: {color: '#1e9fff'}
});

配置项

名称	类型	默认值	可选值	说明
language	string	zn	zn/en	语言选择
data	array	[]	-	显示的数据
content	string	-	-	自定义下拉框html
initValue	array	-	-	初始化选中的数据
tips	string	请选择	-	默认提示placeholder
empty	string	暂无数据	-	空数据提示
filterable	boolean	false	true / false	是否开启搜索
searchTips	string	请选择	-	搜索提示
delay	int	500	-	搜索延迟 ms
filterMethod	function	-	-	搜索回调函数; unction(val, item, index, prop) val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key
filterDone	function	-	-	搜索回调函数; function(val, list) val: 当前搜索值, list: 过滤后的数据
remoteSearch	boolean	false	true / false	是否开启自定义搜索 (远程搜索)
remoteMethod	function	-	-	自定义搜索回调函数; function(val, cb, show, pageIndex) val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码
direction	string	auto	auto/up/down	下拉方向
style	object	{}	-	自定义样式
height	string	200px	-	默认最大高度
paging	boolean	false	true / false	是否开启自定义分页
pageSize	int	10	-	分页条数
pageEmptyShow	boolean	true	true / false	分页无数据是否显示
pageRemote	boolean	true	true / false	是否开启远程分页
radio	boolean	false	true / false	是否开启单选模式
repeat	boolean	false	true / false	是否开启重复性模式
clickClose	boolean	false	true / false	是否点击选项后自动关闭下拉框
prop	object	-	-	自定义属性名称, 具体看下表
theme	object	-	-	主题配置, 具体看下表
model	object	-	-	模型, 多选的展示方式, 具体见下表
iconfont	object	-	-	自定义选中图标
show	function	-	-	展开下拉的回调
hide	function	-	-	隐藏下拉的回调
template	function	-	-	自定义渲染选项; function({ item, sels, name, value })
on	function	-	-	监听选中变化; function({ arr, change, isAdd })
max	int	-	-	设置多选选中上限
maxMethod	function	-	-	达到选中上限的回到
name	string	-	-	表单提交时的name
layVerify	string	-	-	表单验证, 同layui的lay-verify
layVerType	string	-	-	表单验证, 同layui的lay-verType
layReqText	string	-	-	表单验证, 同layui的lay-reqText
toolbar	object	-	-	工具条, 具体看下表
showCount	int	0	-	展示在下拉框中的最多选项数量
enableKeyboard	boolean	true	true / false	是否启用键盘操作选项
enableHoverFirst	boolean	true	true / false	是否默认选中第一项
selectedKeyCode	int	13		选中的键盘KeyCode, 全部KeyCode也可xmSelect.KeyCode.Enter,xmSelect.KeyCode.Space
autoRow	boolean	false	true / false	是否开启自动换行(选项过多时
size	string	medium	large/medium/small/min	尺寸
disabled	boolean	false	true / false	是否禁用多选
create	function	-	-	创建条目; function(val, data), val: 搜索的数据, data: 当前下拉数据
tree	object	-	-	树形结构, 具体看下表
cascader	object	-	-	级联结构, 具体看下表
submitConversion	function	-	-	配置表单提交数据: function(sels, prop); sels: 已选中数据, prop: 自定义的prop
done	function	-	-	渲染完成回调

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	#e54d42	-	选中上限闪烁边框颜色
hover	string	#f2f2f2	-	键盘操作的背景色

inputTags (标签)

源码地址: https://gitee.com/xiehanhan/input-tags-enhanced

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

waitUtil (工具)

// 请求
waitUtil.ajax(options);

// 弹窗1
waitUtil.popup(options);

// 弹窗2
waitUtil.pages(options);

// 事件
waitUtil.event(options);

// 搜索
waitUtil.search(options);

// 表格
waitUtil.table(options);

// 复选
waitUtil.checkbox(options);

// 上传
waitUtil.uploader(options);

// 锁定按钮
waitUtil.locking(this);

// 解锁按钮
waitUtil.unlock(this);

// 截流防抖
waitUtil.debounce(delay, func);

// 过滤对象空字段
waitUtil.filterNullObj(obj);

Cache.js (缓存)

配置路径: public/static/backend/cache.min.js

// 设置缓存
waitCache.setItem(key, value);

// 获取缓存
waitCache.getItem(key);

// 移除缓存
waitCache.removeItem(key);

// 设置带有效期缓存
waitCache.set(key, value, expire)

// 获取缓存,会校验有效期
waitCache.get(key);

// 移除缓存值
waitCache.remove(key, value);

// 清空所有缓存
waitCache.clear(key, value);

Config.js (配置)

配置路径: public/static/backend/config.min.js

let waitConfig = {
    // 默认主题
    theme: 'default',
    // 是否隐藏标签菜单
    isTabHidden: false,
    // 是否开启标签记忆
    isTabMemory: false,
    // 是否开启切换刷新
    isTabRefresh: false
}

Icon (图标库)

提示

实在没有那么多时间一个个的处理图标写文档
直接先安排图片代替，将就着看吧

# 表单组件

# tinymce (富文本)

# iconPicker (图标选择)

# xmSelect (下拉多选)

# 配置项

# prop

# theme

# inputTags (标签)

# waitUtil (工具)

# Cache.js (缓存)

# Config.js (配置)

# Icon (图标库)

表单组件

tinymce (富文本)

iconPicker (图标选择)

xmSelect (下拉多选)

配置项

prop

theme

inputTags (标签)

waitUtil (工具)

Cache.js (缓存)

Config.js (配置)

Icon (图标库)