使用layui所遇到插件扩充问题

Posted on 2018-10-11 16:09  发飙的木鱼  阅读(487)  评论(0)    收藏  举报

使用layui模块化加载时 需要扩充其他js插件 下面用highcharts为例简单说下流程  真实可用

 

 

结构

index.html   js/index.js    js/highcharts.js

 

 

index.html内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/base.css">

</head>
<body class="layui-layout-body">

<form class="layui-form" action="javascript:;" style="margin-top: 10px;">  
<div class="layui-form-item layui-inline">
<div class="layui-input-inline">
<button class="layui-btn" lay-submit lay-filter="sent">查询</button>
</div>
</div>
</form>

<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>

<script src="layui/layui.js"></script>
<script>
layui.config({base: 'js/'}).use('index');  //定义根目录在js下  使用其中的index.js
</script>
</body>
</html>

 

index.js内容 //定义highcharts模块

layui.use(['form','element','highcharts'], function(){
var form = layui.form,layer = layui.layer ,$ = layui.jquery,element = layui.element,highcharts=layui.highcharts;

//监听提交

form.on('submit(sent)', function(data){
///////chart各种定义//////////
$('#container').highcharts(json);
});

});

 

 

highcharts.js拓展内容

layui.define(['jquery'],function(exports){
var $ = layui.jquery
window.jQuery = layui.jquery;

//////////原插件代码////////////////////////

var options = {};
var fun = {
init:function(options){
//if(options && typeof(options) == "Object")
new Highcharts.Chart(options);
}
};
exports('highcharts', fun);
});