表单组件

富文本 (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
searchtrue是否开启搜索:true/false,默认true
pagefalse是否开启分页:true/false,默认true
limit12每页显示数量,默认12
cellWidth20%每个图标格子的宽度:'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'}
});

配置项

prop

名称类型默认值可选值说明
namestringname-显示名称
valuestringvalue-选中值, 当前多选唯一
selectedstringselected-是否选中
disabledstringdisabled-是否禁用
childrenstringchildren-分组children
optgroupstringoptgroup-分组optgroup

theme

名称类型默认值可选值说明
colorstring#009688-主题颜色
maxColorstring v#e54d42-选中上限闪烁边框颜色
hoverstring#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)

提示

  • 实在没有那么多时间一个个的处理图标写文档

  • 直接先安排图片参考,将就一下吧😊

参考图片