Layui：数据表格table中预览图片、视频

最新推荐文章于 2024-06-20 12:45:15 发布

夏已微凉、

最新推荐文章于 2024-06-20 12:45:15 发布

阅读量2.7k

点赞数 5

分类专栏： # Layer 文章标签： Layui预览图片视频 Layui预览图片 Layui预览视频

本文链接：https://blog.csdn.net/qq_36025814/article/details/125860454

版权

该博客介绍了如何在Layui数据表格中实现图片和视频的点击预览功能，包括默认效果、图片预览（支持关闭按钮）和视频预览。通过Layui的模版、视图和渲染方法，结合JavaScript实现弹窗预览，并提供了完整的HTML和JavaScript代码示例。

摘要由CSDN通过智能技术生成

一、说明
二、预览
三、代码

一、说明

在Layui数据表格中点击图片或者视频，弹框预览。
Layui模板也支持循环，如下：

    //第一步：编写模版。你可以使用一个script标签存放模板，如：
    <script id="demo" type="text/html">
      <h3>{
   {
    d.title }}</h3>
      <ul>
      {
   {
   #  layui.each(d.list, function(index, item){
    }}
        <li>
          <span>{
   {
    item.modname }}</span>
          <span>{
   {
    item.alias }}：</span>
          <span>{
   {
    item.site || '' }}</span>
        </li>
      {
   {
   #  }); }}
      {
   {
   #  if(d.list.length === 0){
    }}
        无数据
      {
   {
   #  } }}
      </ul>
    </script>
    //第二步：建立视图。用于呈现渲染结果。
    <div id="view"></div>
    //第三步：渲染模版
    var data = {
    //数据
      "title":"Layui常用模块"
      ,"list":[{
   "modname":"弹层","alias":"layer","site":"https://www.sojson.com/layui/layer.html"},{
   "modname":"表单","alias":"form"}]
    }
    var getTpl = demo.innerHTML
    ,view = document.getElementById('view');
    laytpl(getTpl).render(data, function(html){
   
      view.innerHTML = html;
    });

二、预览

1、默认效果

在这里插入图片描述

2、预览图片效果

点击图片放大，再次点击图片外任意地方关闭
或者设置 ,closeBtn: 1 //显示关闭按钮

3、预览视频效果

点击视频，放大，点击关闭按钮关闭

三、代码

可直接运行，如果失效，引入最新的Layui线上地址

<!DOCTYPE html>
<html>

<head>
    <title>Layui：数据表格table中预览图片、视频</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css"

最低0.47元/天解锁文章

夏已微凉、

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Layui：数据表格table中预览图片、视频

Layui：数据表格table中预览图片、视频
复制链接

扫一扫

专栏目录