layui中使用的一些弹出框

介绍

在前端开发中，弹出框是一个非常重要的元素。而在layui中，也提供了一些弹出框的组件，如layer和laytpl等。本文将介绍这些弹出框组件的使用方法。

1. layer组件

1.1 引入layer组件

在使用layer组件前，需要先引入它的js和css文件。

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css" integrity="sha384-+X1N60JfS4Oea2cJ0gXdhjA2Km0pvqMlGXwPQwcNMzZqOiAc9CtVYaQLD07LwOjb" crossorigin="anonymous">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js" integrity="sha384-cLdJgS+jhcruYfVmBg58z6N9X8//tgP90iN7J5zkLud8tA5n9/7xNEvbfD5KtAxu" crossorigin="anonymous"></script>

其中，layui.min.css和layui.min.js是开发中常用的文件，如果需要更多的组件，可以使用layui.all.js。

1.2 layer的基本使用

layer组件的基本使用方法是通过layer.open()方法打开一个弹出框。

layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.open({
    title: '这是一个弹出框',
    content: '欢迎使用layui',
    btn: ['确定', '取消'],
    yes: function(index, layero){
      //点击确定按钮
      layer.close(index);
    },
    btn2: function(index, layero){
      //点击取消按钮
      layer.close(index);
    }
  });
});

在这个例子中，我们使用了layer.open()方法打开了一个弹出框。其中，title属性用于设置弹出框的标题，content属性用于设置弹出框的内容，btn属性用于设置弹出框的按钮，yes和btn2分别是第一个和第二个按钮的回调函数，用于在用户点击按钮时执行相关操作。

1.3 自定义弹出框的样式

在layer组件中，我们可以通过设置skin属性来自定义弹出框的样式。

layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.open({
    title: '这是一个自定义样式的弹出框',
    content: '欢迎使用layui',
    skin: 'my-style'
  });
});

在这个例子中，我们使用了skin属性设置了弹出框的自定义样式。需要注意的是，我们需要在样式文件中设置我们的自定义样式。

2. laytpl组件

2.1 引入laytpl组件

在使用laytpl组件前，需要先引入它的js文件。

<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js" integrity="sha384-cLdJgS+jhcruYfVmBg58z6N9X8//tgP90iN7J5zkLud8tA5n9/7xNEvbfD5KtAxu" crossorigin="anonymous"></script>

2.2 laytpl的基本使用

laytpl组件可以用于渲染模板，并将数据和模板进行结合后输出。我们可以通过laytpl.render()方法来渲染模板，并传入数据。

<script id="tpl-demo" type="text/html">
  <div>
    <p>{{ d.name }}</p>
    <p>{{ d.age }}</p>
  </div>
</script>
<div id="demo"></div>
<script>
layui.use('laytpl', function(){
  var laytpl = layui.laytpl;
  
  var data = {
    name: '小明',
    age: 18
  }
  
  var html = laytpl($('#tpl-demo').html()).render(data);
  
  $('#demo').html(html);
});
</script>

在这个例子中，我们使用了laytpl.render()方法将模板和数据结合，并设置了渲染后的html内容。

2.3 laytpl的高级用法

在laytpl组件中，我们还可以使用{{# … }}标签来进行条件判断、循环等操作。

<script id="tpl-demo" type="text/html">
  <div>
    {{# if(d.gender === 'male') { }}
      <p>男性</p>
    {{# } else if(d.gender === 'female') { }}
      <p>女性</p>
    {{# } else { }}
      <p>未知性别</p>
    {{# } }}
    
    {{# var numbers = [1, 2, 3, 4]; }}
    {{# layui.each(numbers, function(index, item) { }}
      <p>{{ item }}</p>
    {{# }); }}
  </div>
</script>

在这个例子中，我们使用了{{# if() { }}…{{# } else if() { }}…{{# } else { }}…{{# } }}来进行条件判断，使用了{{# var }}和layui.each()方法来进行循环。需要注意的是，我们可以在{{# … }}标签中使用JavaScript代码进行操作。