Fastadmin 引用layui组件颜色选择器

下载Layui:

将下载好的包解压复制layui目录至Fastadmin框架 public/assets/libs 目录下:

0c64e14583190310

在 public/assets/js/backend-init.js 文件下引入layui:

9d8feec07c190439
require.config({
    paths: {
        'layui': '../libs/layui-v2.9.18/layui',
    },
    shim: {
        'layui': {
            deps: ['css!../libs/layui-v2.9.18/css/layui.css'],
            exports: "layui"
        },
    }
});

使用Layui颜色选择:

图片[3]-Fastadmin 引用layui组件颜色选择器-it网络技术分享
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('选择颜色')}:</label>
        <div class="col-xs-12 col-sm-8 layui-input-inline" style="width: 120px;">
            <input type="text" name="row[color]" value="" placeholder="请选择颜色" class="layui-input"
                   id="ID-colorpicker-demo-form-color">
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="ID-colorpicker-demo-form"></div>
        </div>
    </div>
                layui.use(function () {
                    var colorpicker = layui.colorpicker;
                    var $ = layui.$;
                    // 渲染
                    colorpicker.render({
                        elem: '#ID-colorpicker-demo-form',
                        color: '#1c97f5',
                        done: function (color) {
                            $('#ID-colorpicker-demo-form-color').val(color);
                        }
                    });
                });

最终效果:

图片[4]-Fastadmin 引用layui组件颜色选择器-it网络技术分享
图片[5]-Fastadmin 引用layui组件颜色选择器-it网络技术分享

点击确认后提交的内容

THE END
喜欢就支持一下吧
点赞0 分享