使用Layer弹窗展示数据并美化格式

使用Layer弹窗展示数据并美化格式

本文将介绍如何使用Layer弹窗展示数据，并利用CSS样式调整弹窗内容的格式，包括div间距和值外边框的设置，以提升用户体验。

使用Layer弹窗展示数据

首先，使用Layer的 layer.open() 方法创建一个弹窗，并设置弹窗的标题、内容和尺寸。

layer.open({
  title: '查看',
  content: '查看弹窗的HTML代码',
  area: ['500px', '400px'],
  success: function(layero, index){
    var html = '<div>机构号:'+ data.institution +'</div>';
    html += '<div>邮件号: ' + data.mailNumber + '</div>';
    html += '<div>邮件描述: ' + data.describe + '</div>';
    
    // 显示多张图片
    if (data.images.length > 0) {
      html += '<div>图片:</div>';
      for (var i = 0; i < data.images.length; i++) {
        html += '<img src=' + data.images[i] + ' style="width: 100px; height: 100px; margin-right: 10px;" />';
      }
    }
    
    html += '<div>员工姓名: ' + data.username + '</div>';
    html += '<div>状态（后台编辑）: ' + data.state + '</div>';
    html += '<div>上传时间: ' + data.date + '</div>';
    $(layero).find('.layui-layer-content').html(html);
  }
});

调整div的间距和值外边框

你可以使用CSS样式来调整HTML代码的格式和布局。在你的代码中，可以添加以下CSS样式来调整div的间距和值的外边框：

<style>
  .info-item {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px;
  }
</style>

然后，将每个键值对包装在一个带有 .info-item 类的div中，如下所示：

var html = '<div class="info-item">机构号:'+ data.institution +'</div>';
html += '<div class="info-item">邮件号: ' + data.mailNumber + '</div>';
html += '<div class="info-item">邮件描述: ' + data.describe + '</div>';

// 显示多张图片
 if (data.images.length > 0) {
  html += '<div class="info-item">图片:</div>';
  for (var i = 0; i < data.images.length; i++) {
    html += '<img src=' + data.images[i] + ' style="width: 100px; height: 100px; margin-right: 10px;" />';
  }
}

html += '<div class="info-item">员工姓名: ' + data.username + '</div>';
html += '<div class="info-item">状态（后台编辑）: ' + data.state + '</div>';
html += '<div class="info-item">上传时间: ' + data.date + '</div>';

这样，每个键值对都会带有一个边框，并且之间会有一定的间距，使弹窗内容更加清晰易读。