Layui表格如何实现点击图片预览图片功能

2021-09-12 阅读：6009 类型：前端分类：Layui 标签： layui.js Layui

在使用layui框架的时候，我们有时需要放大表格中的图片，可以使用下面的方法来实现。

表格部分代码

table.render({
    elem: '#currentTableId',
    url: '{:url("union.customer.getCustomer")}',
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports', 'print', {
      title: '提示',
      layEvent: 'LAYTABLE_TIPS',
      icon: 'layui-icon-tips'
    }],
    cols: [[
      {type: "checkbox", width: 50},
      {field: 'id', width: 80, title: 'ID', sort: true},
      {field: 'cate', width: 100, title: '问卷类型'},
      {field: 'nick', minwidth: 80, title: '用户信息'},
      {field: 'content', minwidth: 80, title: '服务评价'},
      {field: 'other_proposal', minwidth: 80, title: '意见'},
      {
        title: '图片'
        ,align: "center"
        ,width:300
        ,templet: function (d) {
          return '<div >'+d.photo+'</div>';
        }
      }, 
      {field: 'created_at', title: '时间', width: 160, sort: true},
      {title: '操作', width: 130, toolbar: '#currentTableBar', align: "center"}
    ]],
    limits: [5, 15, 20, 25, 50, 100],
    limit: 5,
    page: true,
    unresize: false,
    // skin: 'line',
    response: {
    statusName: 'code' //规定数据状态的字段名称，默认：code
      ,statusCode: 200 //规定成功的状态码，默认：0
      ,msgName: 'msg' //规定状态信息的字段名称，默认：msg
      ,countName: 'count' //规定数据总数的字段名称，默认：count
      ,dataName: 'data' //规定数据列表的字段名称，默认：data
    }
});

点击图片预览放大图片

//元素加载完成之后点击事件
$(document).on("click", ".layui-form img[name = 'coverUrl']", function (e) {
  console.log(e)
  layer.open({
    type: 1,
    title: false,
    closeBtn: 0,
    shadeClose: true, //点击阴影关闭
    area: ['50%', '50%'],
    content: "<img width='100%' height='auto' src=" + $(this).context.currentSrc + " />",
  });
})