layui（⼆）——layer组件常见⽤法总结layer是layui的代表作，功能⼗分强⼤，为⽅便以后快速配置这⾥对其常见⽤法做了简单总结
⼀、常⽤调⽤⽅式
//1.普通消息：alert(content,[options],[yesCallBack])
layer.alert('hello', { icon: 1 }, function (index) {
console.log('点击确定按钮，执⾏这⾥')//点击弹窗的确定按钮，执⾏回调
})
//2.询问：confirm(content,[options],[yesCallBack])
console.log('点击确定按钮，执⾏这⾥');//点击确定按钮，执⾏回调
layer.close(index);
})
//3.提⽰：msg（content,[options],[endCallBack]）
layer.msg('提⽰你⼀下', { icon: 6 }, function (index) {
console.log('关闭时执⾏这⾥')
})
//4.精确提⽰：tips(content,element,options)
layer.tips('提⽰的精确点', '#test',{ tips: 2 }) //1,2,3,4-->上右下左
⼆、基础参数配置
  所有的创建层都执⾏open⽅法，open⽅法返回⼀个number
  layer.open({
type: 1                  //0（信息框，默认）1（页⾯层）2（iframe层）3（加载层）4（tips层）
, title: '我是标题'          //标题。①false表⽰⽆标题②['text','css']带样式的标题
,
content: '我是内容'        //内容。①可为$('selector')或者html
, time: 5000                //⾃动关闭。5s后关闭
layui框架怎么用
, id: '01'                  //设置id后，只能同时弹出⼀个，默认为''
//***********************按钮
, btn: ['按钮1', '按钮2', '按钮3']
, yes: function (index, layero) { console.log('点了按钮1');layer.close(index) } //默认不关闭
, btn2: function (index, layero) { console.log('点了按钮2'); return false; }    //点击后不关闭
, btn3: function (index, layero) { console.log('点了按钮3'); }                  //点击后关闭
, btnAlign: 'r'    //btn的位置 'l'：居左，'c'：居中
, closeBtn: 1      //关闭按钮，0表⽰不显⽰
, cancel: function (index, layero) {
　if (confirm('确定关闭吗？')) {
      layer.close(index);
      }
return false;}
, maxmin: true//最⼤最⼩化
//**********************位置和⼤⼩
, area: '500px'          //宽⾼，宽500。['500px',300px]表⽰⾼度为300px
, offset: '300px'        //坐标，top300。['300px','50px']表⽰top300,left50
, fixed: true//固定。⿏标滚动时，固定在可视区
, resize: true//可拉伸。
, zindex: 666            //层级
/
/***********************动画和样式
, anim: 0                //0：放⼤，1：下滑，2：上升，3：左滑，4：右滑，5：渐显，6：抖动
, skin: 'mycss'          //内容样式。mycss是⾃定义的css样式
})
三、关闭弹窗
  使⽤layer.close⽅法可以进⾏关闭弹窗，参数是layer.open⽅法返回的窗体编号（number类型）
    var index = layer.open({ type: 1, title: '提⽰', content: '你好' });
    layer.close(index);
  当弹窗为iframe时，我们怎么在iframe中关闭⾃⼰呢
layer.open({
type: 2,                        //弹窗为iframe,
content: ''  //如果不想让iframe出现滚动条，可以设置content: ['url', 'no']
});
//假设这是iframe中，执⾏下边代码在iframe中关闭⾃⼰
var index = FrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);                          //再执⾏关闭
注：这是为了个⼈查⽅便整理的⽂档，并没有总结完全，查看更多可访问官⽹

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。