layui中选项卡的使用

作者：张铭标

撰写时间：2019年6月 27日

第一步当然是需要引入layui的插件:layui.css和layui.js,最主要的是还要依赖element模块才能进行正常的功能性操作,如果没有就只有样式是无法进行卡片的切换的.

这里用Tab的卡片风格来进行演示说明,首先来看经典代码:

图中的

标签可以根据需求自行增加,在标签里面输入要显示的内容即可

然后在下面的内容区域放入你需要显示的内容就可以和上面的内容相对应

效果图:

这里点击按钮是不可以进行内容正常的切换的,还要记得加入element模块才能进行卡片的正常操作element代码如下:

这样的话就能正常地使用一个卡片风格的选项卡了.当然还有简约风格的使用方法是一样的,值得说的是如果你需要一个带删除的Tab只需要在头部最外层加上一个lay-allowClose="true"的属性即可.

我们还可以对Tab选项卡的切换和删除进行监听,方法如下:

对Tab选项卡的切换:

element.on('tab(filter)', function(data){

  console.log(this); //当前Tab标题所在的原始DOM元素

  console.log(data.index); //得到当前Tab的所在下标

  console.log(data.elem); //得到当前的Tab大容器

});

对Tab选项卡的删除:

element.on('tabDelete(filter)', function(data){

 
console.log(this); //当前Tab标题所在的原始DOM元素

 
console.log(data.index); //得到当前Tab的所在下标

 
console.log(data.elem); //得到当前的Tab大容器

});