Layui 弹层组件 - 基础参数2

简介: Layui 弹层组件 - 基础参数2
btn - 按钮

类型:String/Array,默认:‘确认’

信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: ‘我知道了’,当你要定义两个按钮时,你可以btn: ['yes', 'no']。当然,你也可以定义更多按钮,比如:btn: ['按钮1', '按钮2', '按钮3', …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){},以此类推。如:

//eg1       
layer.confirm('纳尼?', {
  btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
  }
}, function(index, layero){
  //按钮【按钮一】的回调
}, function(index){
  //按钮【按钮二】的回调
});
//eg2
layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

btnAlign - 按钮排列

类型:String,默认:r

你可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。该参数可支持的赋值如下:

image.png


closeBtn - 关闭按钮

类型:String/Boolean,默认:1

layer提供了两种风格的关闭按钮,可通过配置1和2来展示,如果不显示,则closeBtn: 0


shade - 遮罩

类型:String/Array/Boolean,默认:0.3

即弹层外区域。默认是0.3透明度的黑色背景(’#000’)。如果你想定义别的颜色,可以shade: [0.8, '#393D49'];如果你不想显示遮罩,可以shade: 0


shadeClose - 是否点击遮罩关闭

类型:Boolean,默认:false

如果你的shade是存在的,那么你可以设定shadeClose来控制点击弹层外区域关闭。


time - 自动关闭所需毫秒

类型:Number,默认:0

默认不会自动关闭。当你想自动关闭时,可以time: 5000,即代表5秒后自动关闭,注意单位是毫秒(1秒=1000毫秒)

目录
相关文章
|
JavaScript
Layui 弹层组件 - 基础参数3
Layui 弹层组件 - 基础参数3
73 0
|
JavaScript 前端开发
Layui 弹层组件 - 基础参数1
Layui 弹层组件 - 基础参数1
95 0
|
3月前
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
4月前
|
JavaScript
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
vue + element UI 表单中内嵌自定义组件的表单校验触发方案
159 5
|
6月前
|
前端开发 容器
layui使用模板渲染数据
layui使用模板渲染数据
|
6月前
|
小程序 JavaScript
小程序表单组件——button
小程序表单组件——button
68 0
|
JavaScript 索引
Layui 弹层组件 - 基础参数5
Layui 弹层组件 - 基础参数5
193 0
|
JavaScript
Layui 弹层组件 - 基础参数4
Layui 弹层组件 - 基础参数4
73 0
55zTree - 配合 checkbox 的隐藏
55zTree - 配合 checkbox 的隐藏
31 0
|
存储 JavaScript 前端开发
Echarts实战案例代码(13):使用layui弹出模态框通过localStorage跨页面函数传递参数
Echarts实战案例代码(13):使用layui弹出模态框通过localStorage跨页面函数传递参数
190 0