目录

1.首先在backend-init.js中定义依赖配置，路径：public/assets/js/backend-init.js

layui%E7%9A%84%E5%9C%B0%E6%96%B9%E5%BC%95%E7%94%A8%E5%8D%B3%E5%8F%AF-toc" style="margin-left:80px;">2.然后再你需要使用layui的地方引用即可

3.一个颜色选择器的示例

html完整示例：

js完整示例：

---

好看的layui使我喜欢他，但是在fastadmin中自动封装了layer，如果直接引用layui会有冲突报错，解决办法：

1.首先在backend-init.js中定义依赖配置，路径：public/assets/js/backend-init.js

javascript">require.config({paths: {'layui': '../layui/layui',},shim: {'layui': {deps: ['css!../layui/css/layui.css'],init: function () {return this.layui.config({dir: '/assets/js/layui/'});}}}
});

完整示例：

javascript">define(['backend'], function (Backend) {require.config({paths: {'layui': '../layui/layui',},shim: {'layui': {deps: ['css!../layui/css/layui.css'],init: function () {return this.layui.config({dir: '/assets/js/layui/'});}}}});
});

layui%E7%9A%84%E5%9C%B0%E6%96%B9%E5%BC%95%E7%94%A8%E5%8D%B3%E5%8F%AF">2.然后再你需要使用layui的地方引用即可

javascript">require(['layui'], function(undefined){layui.use(['form', 'upload'], function (form, upload) {});
});

注意一：此处只能在js中使用，不能在html中直接使用

注意二：生产环境需要重新压缩打包JS

3.一个颜色选择器的示例

html完整示例：

<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action=""><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label><div class="col-xs-12 col-sm-8"><input id="c-title" class="form-control" name="row[title]" type="text"></div></div><div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Color')}:</label><div class="col-xs-12 col-sm-8"><div class="layui-form-item"><div class="layui-input-inline" style="width: 120px;"><input type="text" value="" name="row[color]" placeholder="请选择颜色" class="layui-input" id="c-color"></div><div class="layui-inline" style="left: -11px;"><div id="color-select-btn" class="layui-inline"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #1c97f5"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div></div></div></div><div class="form-group layer-footer"><label class="control-label col-xs-12 col-sm-2"></label><div class="col-xs-12 col-sm-8"><button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button></div></div>
</form>

js完整示例：

javascript">define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {var Controller = {index: function () {// 初始化表格参数配置Table.api.init({extend: {index_url: 'ngh/color/index' + location.search,add_url: 'ngh/color/add',edit_url: 'ngh/color/edit',del_url: '',multi_url: 'ngh/color/multi',import_url: 'ngh/color/import',table: 'ngh_color',}});var table = $("#table");// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'id',columns: [[{field: 'id', title: __('Id')},{field: 'title', title: __('Title'), operate: 'LIKE'},{field: 'color', title: __('Color'), operate: 'LIKE'},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}]]});// 为表格绑定事件Table.api.bindevent(table);},add: function () {layui('#1c97f5');Controller.api.bindevent();},edit: function () {var color = $('#c-color').val();layui(color);Controller.api.bindevent();},api: {bindevent: function () {Form.api.bindevent($("form[role=form]"));}}};return Controller;
});
function layui(value){require(['layui'], function(){layui.use(['colorpicker'], function(){var colorpicker = layui.colorpicker;// 初始化颜色选择器colorpicker.render({elem: '#color-select-btn', // 绑定按钮color: value, // 默认颜色done: function(color){// 将选择的色值填入目标输入框$('#c-color').val(color);}});});});
}

附：layui库下载地址：layui: 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，极易上手，可以更简单快速地构建网页界面。 - Gitee.com

 在项目中直接引入dist目录文件即可：