点击展示大图预览

server/2024/12/21 21:08:40/

原文链接在table表格里能够实现,点击里面的图片实现大图预览的效果;

一、先安装viewer — 使用npm安装

npm install v-viewer --save

二、在main.js中引入

import Viewer from 'v-viewer'  //点击图片大图预览
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({  //默认样式,可以按需求更改Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

三、在页面上使用

<el-table-column prop="imgPath" label="菜品图片" align="center" header-align="center"><template slot-scope="scope"><viewer><img :src="scope.row.imgPath" width="60px" /></viewer></template>
</el-table-column>

下面是,默认选项介绍:
在这里插入图片描述


http://www.ppmy.cn/server/152046.html

相关文章

mybatis分页插件的使用

1. 引入依赖包 <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>6.1.0</version> </dependency> 2 添加分页插件配置 2.1 使用配置类的方式&#xff08;推荐&#xff09…

GIT命令使用手册(详细实用版)

一、git常用操作参考 第一次提交完整步骤&#xff1a; 1.git init; 2.git add . 3.git commit -m "初始化" 4.git remote add origin https://github.com/githubusername/demo.git 5.git pull origin master 6.git push -u origin master&#xff08;使用-u选项可以将…

ES6学习let和const(二)

一、let let的用法类似于var&#xff0c;但是也是不同之处。 1.1、作用域 let声明的变量具有块级作用域&#xff0c;仅在声明它的代码块内有效。 var声明的变量拥有函数作用域&#xff0c;如果在函数外部声明&#xff0c;他将具有全局作用域。在全局作用域下使用var声明的变…

UE5 做简单的风景观光视频

A、思路 新建摄像机&#xff0c;关卡序列&#xff0c; 镜头试拍录制器&#xff0c;新建镜头轨道&#xff0c;拖入摄像机&#xff0c; 变换&#xff0c;设置多个关键帧&#xff0c;改变摄像机在场景中的位置&#xff0c; 完成后&#xff0c;导出即可。 B、参考图

C哈的刷题计划之杨辉三角形(5)

1、盲听C哈说 哈喽&#xff0c;大家好&#xff0c;我是小C&#xff0c;一个每天嘻嘻哈哈的斜杠女青年。一直受一句话的影响 — "你关注的人&#xff0c;决定你看到的世界&#xff01;" 现在是2024年12月20日早上9点&#xff0c;距离过年只剩一个多月了&#xff0c;总…

JAVA进制转换-对不同位数的转换方法

JAVA进制转换-对不同位数的转换方法 实例结果代码补叙 实例 第一个输入参数设为被转换的数值&#xff0c;第二个输入参数设为源来的位数&#xff0c;第三个输入参数设为目标的位数。 /*** 位数转换* args[0] 被转换值* args[1] 源位数* args[2] 目标位数*/public static vo…

Python 数据结构对比:列表与数组的选择指南

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Python 文章目录 &#x1f4af;前言&#x1f4af;Python中的列表&#xff08;list&#xff09;和数组&#xff08;array&#xff09;的详细对比1. 数据类型的灵活性2. 性能与效率3. 功能与操作4. 使用场景5. 数据结构选…

企业微信对接家校互动模块配置操作

一、背景说明 校园业务班级群和会议功能对接企业微信&#xff0c;需要企业微信后台配置信息后绑定应用管理端&#xff0c;流程较多&#xff0c;文档进行说明。 二、教育类型企业微信申请 企业微信应用家校互通需要教育类型 三、企业微信后台配置--应用配置 &#xff08;一…