fastadmin引入layui,并调用layui接口（测试好用）

超级小可爱

发布于 2023-10-28 09:38:44

6440

发布于 2023-10-28 09:38:44

文章被收录于专栏：小孟开发笔记

第一种方式,全局引入

先去 layui 官网,下载整个仓库 , 有 dist,src 目录的

https://gitee.com/layui/layui

把下载的 layui 放到如下目录:

public/libs/layui

在下面的文件里,添加 layui,paths 和 shim 中分别添加

public/assets/js/require-backend.js

require.config({
  paths: {
    //添加layui
    layui: "../libs/layui/src/layui",
  },
  // shim依赖配置
  shim: {
    //添加layui
    layui: {
      deps: ["css!../libs/layui/src/css/layui.css"],
      init: function () {
        console.log("在这里init了layui");
        return this.layui.config({ dir: "/assets/libs/layui/src/" });
      },
    },
  },
});

目标页 JS 调用

define(["jquery", "bootstrap", "backend", "form", "table", "layui"], function (
  $,
  undefined,
  Backend,
  Form,
  Table,
  layui
) {
  var Controller = {
    index: function () {
      //在这里进行调用
      layui.use(["form", "upload"], function (form, upload) {});
    },
  };
  return Controller;
});

一键压缩打包前后台的JS和CSS, 根目录中执行下面命令后,在浏览器清除缓存刷新才能生效

php think min -m all -r all

二:动态引入

首先在public/assets/js/backend-init.js中定义依赖配置

define(['backend'], function (Backend) {
    require.config({
        paths: {
            'layui': '../libs/layui/src/layui',
        },
        shim: {
            'layui': {
                deps: ['css!../libs/layui/src/css/layui.css'],
                init: function () {
                    console.log("在这里init了layui")
                    return this.layui.config({ dir: '/assets/libs/layui/src/' });
                }
            }
        }
    })
});

目标页 JS 调用

define(["jquery", "bootstrap", "backend", "form", "table", "layui"], function (
  $,
  undefined,
  Backend,
  Form,
  Table,
  layui
) {
  var Controller = {
    index: function () {
      //在这里进行调用
      require(["layui"], function (undefined) {
        layui.use(["form", "upload"], function (form, upload) {});
      });
    },
  };
  return Controller;
});

一键压缩打包前后台的JS和CSS, 根目录中执行下面命令后,在浏览器清除缓存刷新才能生效