## 3.1.全部方法 :id=method
方法 | 参数 | 描述
:---|:--- |:---
flexible(expand) | true和false | 折叠/展开侧导航
activeNav(url) | a标签里面的lay-href值 | 设置侧导航栏选中
refresh(url) | url，可为空 | 刷新指定Tab或当前Tab
closeAllTabs() | 无 | 关闭所有选项卡
closeOtherTabs(url) | url | 关闭除url外所有选项卡
closeThisTabs(url) | url，可为空 | 关闭url或当前选项卡
rollPage(d) | 方向(left、right、auto) | 滚动选项卡tab
| |
iframeAuto() | 无 | 让当前的ifram弹层自适应高度
closeThisDialog() | 无 | 关闭当前iframe弹窗
closeDialog(elem) | dom选择器 | 关闭elem元素所在的弹窗(页面层弹窗)
| |
putTempData(key, value) | key,value | 缓存临时数据
getTempData(key) | key | 获取缓存的临时数据
parseJSON(string) | 字符串 | 解析json，解析失败返回undefined
getPageHeight() | 无 | 获取浏览器高度
getPageWidth() | 无 | 获取浏览器宽度
| |
btnLoading(elem) | dom选择器 | 设置按钮为加载状态
openSideAutoExpand() | 无 | 开启鼠标移入侧边栏自动展开
openCellAutoExpand() | 无 | 开启鼠标移入表格单元格超出内容自动展开
modelForm(layero, btnFilter, formFilter) | | 把弹窗自带的按钮跟弹窗内的表单绑定一起
| |
hasPerm(auth) | 权限 | 判断当前登录的用户是否有权限
renderPerm() | 无 | 移除没有权限的dom元素
使用示例：
```javascript
layui.use(['admin'], function () {
var admin = layui.admin;
var pageHeight = admin.getPageHeight(); // 获取浏览器高度
});
```
**admin.iframeAuto()方法：** <br/>
 针对type:2的弹窗自适应弹窗高度，写在弹窗的子页面中，此方法是调用一次做一次高度自适应，
如果你用js动态修改了弹窗子页面的高度，需要再调用一次。
**admin.closeThisDialog()：** <br/>
 关闭当前iframe类型弹窗，针对type:2的弹窗，在弹窗的子页面调用即可关闭当前的iframe弹窗。
**admin.closeDialog(elem)：** <br/>
 关闭非iframe类型的弹窗，调用需要传递弹窗页面里面任意一个的元素：
```
admin.closeDialog('#xxx'); // 关闭id为xxx元素所在的页面层的弹窗
```
关闭弹窗还可以使用ew-event操作：
```html
<!-- 关闭页面层的弹窗 -->
<button ew-event="closeDialog"></button>
<!-- 关闭iframe类型的弹窗 -->
<button ew-event="closeIframeDialog"></button>
```
admin.openSideAutoExpand()方法需要在index.html中调用，admin.openCellAutoExpand()可在任何页面调用。
## 3.2.判断权限hasPerm :id=has_perm
通过“admin.hasPerm(auth)”可以控制按钮级别的权限隐藏：
```javascript
if(!admin.hasPerm('user:add')) {
$('#btnUserAdd').remove();
}
```
- “hasPerm”方法需要通过“config.getUserAuths”方法来获取全部权限；
- “config.getUserAuths”是通过“config.getUser”方法从用户信息中获取权限的；
- "config.getUser"从本地缓存中获取用户信息的，"config.putUser"把用户信息放入缓存中。
在main.js中有获取用户信息并通过"config.putUser"放入缓存中的写法，请参考。
**还可以通过加属性的方式来隐藏：**
```html
<button perm-show="user:add">添加</button>
```
> “perm-show”可以用于任意元素，对于动态添加的元素调用admin.renderPerm()来更新渲染。
## 3.3.popupRight和open :id=open
快速使用：
```javascript
// 打开弹窗
admin.open({
type: 2,
content: 'tpl-theme.html'
});
// 打开右侧面板
admin.popupRight({
type: 2,
content: 'tpl-theme.html'
});
```
 这两个方法只是对layer.open进行了一层封装，用法和layer一样，查看[layer文档](https://www.layui.com/doc/modules/layer.html)。
**新增参数url：**
```javascript
admin.open({
title: 'Hello',
url: 'tpl-theme.html'
});
admin.popupRight({
url: 'tpl-theme.html'
});
```
 `type:2, content:xxx`这种是iframe类型的弹窗，使用`url`会通过ajax加载页面到弹窗中，而不是iframe嵌入。
 当使用url方式的时候，弹窗页面应该是代码片段，而不是完整的html，如下所示：
```html
<style>
* { color: #333; }
</style>
<form id="modelRoleForm" lay-filter="modelRoleForm" class="layui-form model-form">
<input name="roleId" type="hidden"/>
<div class="layui-form-item">
<label class="layui-form-label">角色名</label>
<div class="layui-input-block">
<input name="roleName" placeholder="请输入角色名" type="text" class="layui-input" maxlength="20"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item text-right">
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
<button class="layui-btn" lay-filter="modelSubmitRole" lay-submit>保存</button>
</div>
</form>
<script>
layui.use(['layer', 'form'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
// 表单提交事件
form.on('submit(modelSubmitRole)', function (data) {
console.log(data.field);
return false;
});
});
</script>
```
 页面不需要html、body这些东西，并且可以直接用`<script>`标签来写事件，至于参数传递，请到弹窗专题查看。
> 使用url方式更加符合单页面应用
## 3.4.加载动画loading :id=loading
快速使用：
```javascript
admin.showLoading('#xxx'); // 在id为xxx的元素中显示加载层
admin.showLoading('#xxx', 1, '.8'); // 显示type为1、透明度为0.8的遮罩层
```
- 参数一`elem` 非必填 元素选择器，不填为body；
- 参数二`type` 非必填 动画类型(1 小球，2 魔方，3信号)，默认是1；
- 参数三`opacity` 非必填 透明度(0 - 1)，默认不透明；
尺寸控制，提供有两种尺寸，用法：
```javascript
admin.showLoading({
elem: '#xxx',
type: 1,
size: 'sm' // 默认是sm小型尺寸，还可以选md大型尺寸
});
```
移除加载动画：
```javascript
admin.removeLoading('#xxx');
admin.removeLoading('#xxx', true, true);
```
- 参数一 非必填 元素选择器，不填为body；
- 参数二 非必填 true是淡出效果，false直接隐藏，默认是true；
- 参数三 非必填 true是删除，false是隐藏不删除，默认是false；
页面载入的加载动画：
```html
<body>
<!-- 小球样式 -->
<div class="page-loading">
<div class="ball-loader">
<span></span><span></span><span></span><span></span>
</div>
</div>
<!-- 魔方样式 -->
<div class="page-loading">
<div class="rubik-loader"></div>
</div>
<!-- 信号样式 -->
<div class="page-loading">
<div class="signal-loader">
<span></span><span></span><span></span><span></span>
</div>
</div>
<!-- 加sm是小型尺寸 -->
<div class="page-loading">
<div class="signal-loader sm">
<span></span><span></span><span></span><span></span>
</div>
</div>
</body>
```
 写在页面中需要在js中调用`admin.removeLoading()`移除加载动画，common.js中已经写好了。
**按钮loading：**
```javascript
admin.btnLoading('#btn1'); // 设置按钮为loading状态
admin.btnLoading('#btnLoading', false); // 移除按钮的loading状态
admin.btnLoading('#btn1', '加载中'); // 设置按钮为loading状态，同时修改按钮文字
admin.btnLoading('#btnLoading', '保存', false); // 移除按钮的loading状态，同时修改按钮文字
```
## 3.5.ajax封装 :id=ajax
req方法：
```javascript
admin.req('url',{
username: 'admin',
password: '123456'
}, function(res){
alert(res.code + '-' + res.msg);
}, 'get');
```
- 参数一 请求的url
- 参数二 请求参数
- 参数三 请求回调（失败也进此回调，404、403等）
- 参数四 请求方式，get、post、put、delete等
ajax方法，参数同$.ajax：
```javascript
admin.ajax({
url: 'url',
data: {},
headers： {},
type: 'post',
dataType: 'json',
success: function(res){
alert(res.code + '-' + res.msg);
}
});
```
 req和ajax都实现了自动传递header、预处理、系统错误依然回调到success等功能。
> 自动传递header是通过config.getAjaxHeaders()方法，请求回调预处理是通过config.ajaxSuccessBefore()方法。
## 3.6.ew-event事件绑定 :id=event
使用示例：
```html
<a ew-event="fullScreen">全屏</a>
<a ew-event="flexible">折叠导航</a>
```
事件 | 描述
:---|:---
flexible | 折叠侧导航
refresh | 刷新主体部分
closeThisTabs | 关闭当前选项卡
closeOtherTabs | 关闭其他选项卡
closeAllTabs | 关闭全部选项卡
leftPage | 左滚动选项卡
rightPage | 右滚动选项卡
|
closeDialog | 关闭当前页面层弹窗
closeIframeDialog | 关闭当前iframe弹窗
|
theme | 打开主题设置弹窗
note | 打开便签弹窗
message | 打开消息弹窗
psw | 打开修改密码弹窗
logout | 退出登录
|
fullScreen | 全屏切换
back | 浏览器后退
|
open | 打开弹窗
popupRight | 打开右侧弹窗
ew-event属性可用于任何元素，不仅仅是a标签，theme、note等可以通过`data-url`属性配置对应的url，
还可以通过`data-window="top"`属性配置在父页面处理事件。
```html
<a ew-event="theme" data-url="xxx.html">主题</a>
```
## 3.7.open和popupRight事件 :id=event_open
这两个事件是用来支持非js方式打开弹窗：
```html
<button ew-event="open" data-type="2" data-content="http://baidu.com">iframe弹窗</button>
<button ew-event="open" data-type="1" data-url="form.html">页面弹窗</button>
<button ew-event="open" data-type="1" data-content="#userForm">页面弹窗</button>
<form id="userForm">......省略</form>
<!-- 设置area和offset -->
<button ew-event="open" data-type="1" data-content="Hello" data-area="80px,60px" data-offset="10px,10px">页面弹窗</button>
<!-- popupRight一样的用法 -->
<button ew-event="popupRight" data-type="2" data-url="http://baidu.com" data-title="百度一下，你就知道">右侧弹窗</button>
<!-- function类型参数写法 -->
<button ew-event="open" data-type="1" data-content="Hello" data-success="onDialogSuccess">页面弹窗</button>
<script>
layui.use(['layer'], function(){
var layer = layui.layer;
// 方法需要加window
window.onDialogSuccess = function(){
layer.msg('弹窗被成功打开了');
};
});
</script>
```
layer支持的参数大部分都可以通过data属性来设置，数组类型用逗号分隔，function类型需要把作用域放在window对象下。
