【FastAdmin】在页面中使用layui，以此引申使用颜色选择器示例

目录

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

2.然后再你需要使用layui的地方引用即可

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

html完整示例：

js完整示例：

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

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

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

完整示例：

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

2.然后再你需要使用layui的地方引用即可

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完整示例：

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目录文件即可：