航歌 - 做最好的开发者知识平台

留言首页

当前位置：
首页
>
编程社区
>
其他
> layer - 简单好用的Web弹出层组件使用详解7（常用的回调方法）

layer - 简单好用的Web弹出层组件使用详解7（常用的回调方法）

2018-06-07 发布：hangge 阅读：1260

十三、提示框常用的回调方法

1，窗口拉伸动作回调

当我们拖拽提示框右下角对窗体进行尺寸调整时，会触发 resizing 这个回调方法。该回调返回一个参数：当前提示框的 DOM 对象。

layer.alert('欢迎访问 hangge.com', {
resizing: function(layero){
console.log(layero);
}
});

2，窗口拖动回调

当我们拖动提示框改变位置后，会触发 moveEnd 这个回调方法。该回调返回一个参数：当前提示框的 DOM 对象。

layer.alert('欢迎访问 hangge.com', {
moveEnd: function(layero){
console.log(layero);
}
});

3，确定按钮点击回调

当确定按钮（第一个按钮）点击后会调用 yes 这个方法，该方法携带如下两个参数：

当前提示框的索引

当前提示框的DOM对象

layer.open({
content: '欢迎访问 hangge.com',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
});

4，右上角关闭按钮点击回调

（1）当点击提示框右上角的关闭按钮时，会调用 cancel 这个方法，该方法携带如下两个参数：

当前提示框的索引

当前提示框的 DOM 对象

（2）默认情况下点击关闭按钮会自动触发关闭提示框这个行为。如果不想关闭，则 return false 即可。

layer.alert('欢迎访问 hangge.com', {
cancel: function(index, layero){
if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
layer.close(index)
}
return false;
}
});

5，窗口弹出后的回调

如果我们想在弹出框显示完毕时执行一些语句，使用使用 success 这个回调方法。该方法携带如下两个参数：

当前提示框的 DOM 对象

当前提示框的索引

layer.alert('欢迎访问 hangge.com', {
success: function(layero, index){
console.log(layero, index);
}
});

6，弹出框销毁回调

无论是确认还是取消，只要弹出框被销毁了，end 这个回调方法都会执行。该方法不携带任何参数。

layer.alert('欢迎访问 hangge.com', {
end: function(){
console.log("弹出框被销毁了");
}
});

7，最大化、最小化、还原后触发的回调

弹出框最大化、最小化、还原后分别会触发 full、min、restore 这几个回调方法。这些方法都只携带一个参数：当前提示框的 DOM 对象。

layer.open({
type: 1,
area: ['500px', '200px'],
content: '欢迎访问 hangge.com',
maxmin: true,
full: function(layero){
console.log("窗口最大化了!");
},
min: function(layero){
console.log("窗口最小化了!");
},
restore: function(layero){
console.log("窗口还原了!");
}
});

8，layer 组件初始化就绪回调

由于 layer 内置了轻量级加载器，所以我们根本不需要单独引入 css 等文件。但是加载总是需要过程，如果我们需要在页面一打开就要执行弹层时，那么最好是将弹层放入 ready 方法中，如：

//页面一打开就执行弹层
layer.ready(function(){
layer.msg('很高兴一开场就见到你');
});

上一篇layer - 简单好用的Web弹出层组件使用详解6（弹出框的样式、参数设置）下一篇TIOBE - 2018年6月编程语言排行榜

打赏支持

评论（0）

提交

文章类别

编程社区
SwiftFlex / FlashHTML5 / CSS3CordovaSpringBoot / CloudDocker / K8sReact / RN其他
奇文共赏

本类相关

EdgeX - 使用Kubernetes部署运行EdgeX Foundry边缘计算平台

jQuery - jQuery3的新特性汇总（附样例）

JS - 判断空值的方法（undefined、null）

MySQL - 数据库备份与恢复教程2（使用Xtrabackup）

Cockpit - 基于Web的Linux管理工具的安装和使用教程（CentOS为例）

InfluxDB时序数据库的安装使用教程2（安装部署、命令行基本用法）

Java - 《阿里Java开发手册》代码规范学习笔记2（数据库规约）

Kafka可视化客户端工具（Kafka Tool 2）的安装和使用

Vue.js - Transition过渡动画的使用6（配合vue-router、vue-navigation使用）

Oracle - Windows下Oracle 11g数据库详细安装、设置教程

移动版给我留言打赏支持

© copyright 2006-2021 航歌. All rights reserved. 苏ICP备14040777号