Layui 弹层组件 - 基础参数1

简介: Layui 弹层组件 - 基础参数1

我们提到的基础参数主要指调用方法时用到的配置项,如:layer.open({content: ''})layer.msg('', {time: 3})等,其中的contenttime即是基础参数,以键值形式存在,基础参数可合理应用于任何层类型中,您不需要所有都去配置,大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意,从2.3开始,无需通过layer.config来加载拓展模块。


type - 基本层类型

类型:Number,默认:0

layer提供了5种层类型,可传入的值有:

  • 0(信息框,默认)
  • 1(页面层)
  • 2(iframe层)
  • 3(加载层)
  • 4(tips层)

title - 标题

类型:String/Array/Boolean,默认:‘信息’

title支持三种类型的值,若你传入的是普通的字符串,如title :‘我是标题’,那么只会改变标题文本;若你还需要自定义标题区域样式,那么你可以title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false。


content - 内容

类型:String/DOM/Array,默认:’’

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。譬如:

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意,如果str是object,那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});        

skin - 样式类名

类型:String,默认:’’

skin不仅允许你传入layer内置的样式class名,还可以传入您自定义的class名。这是一个很好的切入点,意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有:layui-layer-lanlayui-layer-molv,未来我们还会选择性地内置更多,但更推荐您自己来定义。以下是一个自定义风格的简单例子

//单个使用
layer.open({
  skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
layer.config({
  skin: 'demo-class'
})
//CSS 
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。    

area - 宽高

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

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: ‘500px’,高度仍然是自适应的。当你宽高都要定义时,你可以area: [‘500px’, ‘300px’]


offset - 坐标

类型:String/Array,默认:垂直水平居中

offset默认情况下不用设置。但如果你不想垂直水平居中,你还可以进行以下赋值:


icon - 图标。信息框和加载层的私有参数

类型:Number,默认:-1(信息框)/0(加载层)

信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2。如:

//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载
目录
相关文章
|
JavaScript
Layui 弹层组件 - 基础参数3
Layui 弹层组件 - 基础参数3
80 0
|
7月前
|
前端开发 容器
layui使用模板渲染数据
layui使用模板渲染数据
|
7月前
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
【sgDragSize】自定义组件:自定义拖拽修改DIV尺寸组件,适用于窗体大小调整
|
JavaScript
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
1721 0
VUE element-ui之table表格中嵌套输入框,且输入框失焦自动勾选当前行
|
JavaScript
Layui 弹层组件 - 基础参数4
Layui 弹层组件 - 基础参数4
82 0
Layui 弹层组件 - 基础参数2
Layui 弹层组件 - 基础参数2
69 0
|
JavaScript 索引
Layui 弹层组件 - 基础参数5
Layui 弹层组件 - 基础参数5
204 0
|
JavaScript 前端开发 UED
Vue中如何进行表单自动完成与下拉选择器
Vue中如何进行表单自动完成与下拉选择器
|
前端开发 JavaScript API
Concis组件库封装——Popover气泡卡片
Concis组件库封装——Popover气泡卡片组件记录
157 1
|
存储 JavaScript 前端开发
Echarts实战案例代码(13):使用layui弹出模态框通过localStorage跨页面函数传递参数
Echarts实战案例代码(13):使用layui弹出模态框通过localStorage跨页面函数传递参数
202 0