扩展一个 layui 模块案例

最新推荐文章于 2025-04-08 16:25:03 发布

AnyintRobot

最新推荐文章于 2025-04-08 16:25:03 发布

阅读量553

点赞数

文章标签： javascript layui 前端

本文链接：https://blog.youkuaiyun.com/qq_30644817/article/details/128742271

版权

扩展一个 layui 模块

一、主页html
二、扩展模块JS
三、文件目录

layui版本：2.7.6
IDE：vscode

一、主页html

注意layui.config函数内的路径不要写错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>
    




    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script>
        //config的设置是全局的
        layui.config({
            base: '/mod/' //假设这是你存放拓展模块的根目录
            }).extend({ //设定模块别名
            mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
        });


        layui.use(['mymod'], function(){
        var mymod = layui.mymod;

        mymod.hello('World!');

        });
</script> 
</body>


</html>

二、扩展模块JS

/**
  扩展一个 mymod 模块
**/      
 
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('mod1', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };
  
  //输出 mymod 接口
  exports('mymod', obj);
});

三、文件目录

在这里插入图片描述