layui 加載第三方插件

• 1. 使用模塊
• 2. 內置模塊
• 3. 擴展一個 layui 模塊
• 4. 加載第三方插件為layui模塊

1. 使用模塊

Layui的模塊加載采用核心的 layui.use(mods, callback)方法，當你的JS 需要用到Layui模塊的時候，我們更推薦你采用預先加載，因為這樣可以避免到處寫layui.use的麻煩。你應該在最外層如此定義：

layui.use(['form', 'upload'], function(){ //如果只加載一個模塊，可以不填數組。如：layui.use('form')var form = layui.form //獲取form模塊,upload = layui.upload; //獲取upload模塊//監聽提交按鈕form.on('submit(test)', function(data){console.log(data);});//實例化一個上傳控件upload({url: '上傳接口url',success: function(data){console.log(data);}}) });

2. 內置模塊

layui 提供了一些常見的模塊可以直接使用，非常方便：

• 彈出層 layer
• 日期與時間選擇 laydate
• 即時通訊 layim
• 分頁 laypage
• 模板引擎 laytpl
• 數據表格 table
• 表單 form
• 文件上傳 upload
• 穿梭框 transfer
• 樹形組件 tree
• 顏色選擇器 colorpicker
• 常用元素操作 element
• 滑塊 slider
• 評分 rate
• 輪播 carousel
• 流加載 flow
• 工具集 util
• 代碼修飾器 code

3. 擴展一個 layui 模塊

第一步：確認模塊名，假設為：mymod，然后新建一個mymod.js文件放入項目任意目錄下（注意：不用放入layui目錄）
第二步：編寫test.js 如下：

//提示：模塊也可以依賴其它模塊，如：layui.define('layer', callback); layui.define(function(exports){ var obj = {hello: function(str){alert('Hello '+ (str||'mymod'));}};//輸出test接口exports('mymod', obj); });

第三步：設定擴展模塊所在的目錄，然后就可以在別的JS文件中使用了

//config的設置是全局的 layui.config({base: '/res/js/' //假設這是你存放拓展模塊的根目錄 }).extend({ //設定模塊別名mymod: 'mymod' //如果 mymod.js 是在根目錄，也可以不用設定別名,mod1: 'admin/mod1' //相對于上述 base 目錄的子目錄 });//你也可以忽略 base 設定的根目錄，直接在 extend 指定路徑（主要：該功能為 layui 2.2.0 新增） layui.extend({mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路徑，即不跟隨 base 路徑 })//使用拓展模塊 layui.use(['mymod', 'mod1'], function(){var mymod = layui.mymod,mod1 = layui.mod1,mod2 = layui.mod2;mymod.hello('World!'); //彈出 Hello World! });

4. 加載第三方插件為layui模塊

如果是加載第三方插件，需要改為layui模塊式的加載，如sortable插件：

layui.define(function(exports){// 插入sotable.js源碼exports('sortable', null); });

使用：

layui.config({base: '../layadmin/layuiadmin/' }).extend({index: 'lib/index', //主入口模塊sortable: 'business/sortable' }).use(['index','sortable'], function() {new Sortable($(".view-content")[0],{animation: 150}); });

總結

以上是生活随笔為你收集整理的layui 加载第三方插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。