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

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

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

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('很高兴一开场就见到你');
});