layer弹层组件

layer是一个弹层组件，主要包括：toast(轻提示)、warning(警告提示)、success(成功提示)、loading(加载提示)、Modal(弹层)、Dialog(对话框)。只提供一个核心调用方法，即：layer.open(options)。

    <script type="text/javascript">            
        const moduleInit = ['tool','form','layer'];
        function mbuiInit() {
            let tool = mbui.tool,form= mbui.form,layer=mbui.layer;
            layer.open({
                title: '标题',
                content: '内容',
                btn:['确定','取消'],
                yes:function(index){
                    //do some things here    
                },
                no:function(index){
                    //do some things here
                },
                end:function(index){
                    //do some things here
                }
            });
        }
    </script>

参数说明

即核心调用方法的参数：layer.open(options) 中的options：

1、type - 设置弹层的类型
类型：Number
默认：1 （0表示提示层，1表示信息层，2表示输入层）

2、title - 设置弹层标题
类型：String或Array
默认：空，值可以为字符串或者数组。为空则不显示
如：

title: '标题'
//或者
title: ['标题', 'background-color: #eee;'] //第二个参数可以自定义标题的样式

3、content - 设置弹层内容
类型：String
必选参数

4、time - 控制自动关闭层所需秒数
类型：Number
默认不开启，支持整数和浮点数

5、style - 自定义层的样式
类型：String
非常实用，如：

layer.open({
  style: 'border:none; background-color:#78BA32; color:#fff;',
  content:'内容'
})

6、className - 自定义一个css类
类型：String
用于自定义样式。如

layer.open({
  className: 'user-login', //这样你就可以在css里面控制该弹层的风格了
  content:'内容'
})

7、btn - 按钮
类型：String/Array
不设置则不显示按钮。如果只需要一个按钮，则btn: ‘按钮’，如果有两个，则：btn: [‘按钮一’, ‘按钮二’]。

8、shade - 控制遮罩展现
类型：String/Boolean
默认：true，该参数可允许你是否显示遮罩，并且定义遮罩风格

shade: false //不显示遮罩
或者
shade: 'background-color: rgba(0,0,0,.3)' //自定义遮罩的透明度

9、shadeClose - 点击遮罩时关闭层
类型：Boolean
默认：true，是否点击遮罩时关闭层

10、fixed - 是否固定层的位置
类型：Boolean
默认：true

11、top - 控制层的纵坐标
类型：Number
默认：无，一般情况下不需要设置，因为层会始终垂直水平居中，只有当fixed: false时top才有效。

12、success - 层成功弹出层的回调
类型：Function
该回调参数返回一个参数为当前层元素对象

success: function(elem){
  console.log(elem);
}

13、yes - 确定按钮的回调
类型：Function
点确定按钮触发的回调函数，返回一个参数为当前层的索引

yes: function(index){
  alert('点击了是');
  layer.close(index);
}

14、no - 取消按钮的回调
类型：Function
点取消按钮触发的回调函数，返回一个参数为当前层的索引

no: function(index){
  alert('点击了否');
  layer.close(index);
}

15、end - 层彻底销毁后的回调函数
类型：Function
层彻底销毁后的回调函数，返回一个参数为当前层的索引

end: function(index){
  alert('弹层已关闭');
  layer.close(index);
}

调用方法

layer.open({
    type: 1,
    title: '标题',
    content: '内容',
    btn:['确定','取消'],
    yes:function(index){
        //do some things here    
    },
    no:function(index){
        //do some things here
    },
    end:function(index){
        //do some things here
    }
});

内置方法

1、toast(轻提示)

    //默认3秒关闭
    layer.msg('我是toast，轻提示');

2、warning(警告提示)

    //默认3秒关闭
    layer.warning('我是warning，警告提示');

3、success(成功提示)

    //默认3秒关闭
    layer.success('我是success，成功提示');

4、loading(加载提示)

    //默认不关闭
    layer.loading('我是success，成功提示');

    //手动关闭的方式
    let loading = layer.loading('我是success，成功提示');
    layer.close(loading);

5、alert(Modal提示)

layer.alert('账号在别的设备上登录，你被迫下线！');

6、confirm(Modal提示)

layer.confirm('账号在别的设备上登录，你被迫下线！');

7、prompt(输入提示)

layer.prompt('账号在别的设备上登录，你被迫下线！',function(index){                
    let val=$('#prompt'+index).val();    
    if(val==''){
        layer.error('请输入内容');
    }
});

其它内置方法

1、关闭特定层，index为该特定层的索引

layer.close(index);

2、关闭页面所有layer的层

layer.closeAll();