在FastAdmin中使用layui框架方法

在FastAdmin中使用layui框架方法

• [参考官方文档安装或者下载layui](开始使用 - Layui 文档)
• 进入FastAdmin/public目录，在终端运行（我使用的方法）

npm i layui

• 在应用对应的JS文件中加入以下代码

select:function(){ require.config({ paths: { 'layui': '/node_modules/layui/dist/layui', }, shim: { 'layui':{ deps:['css!/node_modules/layui/dist/css/layui.css'], exports: "layui" }, } }); require(['layui'], function (layui) { layui.use(['form', 'laydate', 'util'], function(){ var form = layui.form; var layer = layui.layer; var laydate = layui.laydate; var util = layui.util;

            // 自定义验证规则
            form.verify({
                pass: function(value) {
                    if (!/(.+){6,12}$/.test(value)) {
                        return '密码必须 6 到 12 位';
                    }
                }
            });

            // 指定开关事件
            form.on('switch(switchTest)', function(data){
                layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
            });

            // 提交事件
            form.on('submit(demo1)', function(data){
                var field = data.field; // 获取表单字段值
                // 显示填写结果，仅作演示用
                layer.alert(JSON.stringify(field), {
                    title: '当前填写的字段值'
                });
                // 此处可执行 Ajax 等操作
                // …
                return false; // 阻止默认 form 跳转
            });

            // 日期
            laydate.render({
                elem: '#date'
            });

            // 普通事件
            util.on('lay-on', {
                // 获取验证码
                "get-vercode": function(othis){
                    var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
                    // 验证通过
                    if(isvalid){
                        layer.msg('手机号规则验证通过');
                        // 此处可继续书写「发送验证码」等后续逻辑
                        // …
                    }
                }
            });
        });
    });

},