element-ui点击文字查看图片预览功能

今天做一个点击文字查看图片的功能,大体页面长这样子,点击查看显示对应的图片
在这里插入图片描述
在这里插入图片描述

引入el-image-viewer,点击的文字时候设置图片预览组件显示并传入图片的地址

关键代码


<el-link v-if="scope.row.fileList.length > 0" type="primary" @click="handleClickImage(scope.row)" :underline="false">查看</el-link><el-image-viewer v-if="imageShow" :on-close="() => { imageShow = false; }" :url-list="imageList" />
 components: {'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')},data() {return {imageShow: false,imageList: []};},methods: {handleClickImage(e) {this.imageShow = truelet urls = e.fileList.map(obj => obj.url);this.imageList = urls;},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python基础:18、Python文件操作

1&#xff09;文件的编码 什么是编码&#xff1f; 编码就是一种规则集合&#xff0c;记录了内容和二进制间进行相互转换的逻辑。 编码有许多中&#xff0c;我们最常用的是UTF-8编码 为什么需要使用编码&#xff1f; 计算机只认识0和1&#xff0c;所以需要将内容翻译成0和1才能…

Ubuntu20.04卸载ros2 foxy版本安装ros1 noetic版本

前言 如果你ubuntu中没有ros&#xff0c;可以试着直接从鱼香ros一键安装包指令处开始。 卸载ros2 sudo apt-get remove ros-*接下来如果你直接使用鱼香ros的一键安装命令&#xff0c;会出错。 设置源 设置源&#xff0c;这里使用的是中科大的。 sudo sh -c . /etc/lsb-r…

基于SpringBoot+Vue+Uniapp家具购物小程序的设计与实现

详细视频演示 请联系我获取更详细的演示视频 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而…

3个方法快速恢复微信已过期或被清理图片

微信作为现在国内用户数量最多的社交软件&#xff0c;已经成为了许多人日常生活和工作中必不可少的一部分。但微信中的图片有时会因为多种原因而消失&#xff0c;如过期、被清理或者误删。遇到这种情况&#xff0c;那么已过期或被清理的图片还能恢复吗&#xff1f;下面小编就来…

论文速读:通过目标感知双分支蒸馏进行跨域目标检测(CVPR2022)

原文标题&#xff1a;Cross Domain Object Detection by Target-Perceived Dual Branch Distillation 中文标题&#xff1a;通过目标感知双分支蒸馏进行跨域目标检测 论文地址&#xff1a; https://arxiv.org/abs/2205.01291 代码地址&#xff1a; GitHub - Feobi1999/TDD 这篇…

在IDEA中配置Selenium和WebDriver

前言&#xff1a; 在当今自动化测试和网络爬虫的领域&#xff0c;Selenium是一个被广泛使用的工具。它不仅能够模拟用户与浏览器的交互&#xff0c;还能进行网页测试和数据抓取。而为了使用Selenium与谷歌/Edge浏览器进行自动化测试&#xff0c;配置合适的WebDriver至关重要。本…

Java--练习--DVD管理系统

一、详细代码 package demo2.Test;import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanner;public class DVD2 {//DVD管理系统//声明三个数组 用来存储 名称 状态 借出日期 借出次数String[] names new St…

游戏引擎哪家强?选哪一个更有钱途

游戏引擎乃是构筑及开发视频游戏的软件架构。其供应一整套工具与库&#xff0c;以处置常见的游戏开发事务&#xff0c;诸如渲染图形、模拟物理、管控音频等等。凭借对游戏引擎的运用&#xff0c;开发人员能够将精力倾注于构建其游戏的独特之处&#xff0c;而非再度发明此类基础…

【游戏模组】极品飞车12无间风云冬季mod,冬天版本的无间风云你体验过吗

各位好&#xff0c;今天小编给大家带来一款新的高清重置魔改MOD&#xff0c;本次高清重置的游戏叫《极品飞车12无间风云》。 《极品飞车12&#xff1a;无间风云》是由Black Box游戏制作室开发的竞速类游戏&#xff0c;于2008年11月18日在北美首发、2008年11月21日在欧洲先后推…

【深入学习Redis丨第八篇】详解Redis数据持久化机制

前言 Redis支持两种数据持久化方式&#xff1a;RDB方式和AOF方式。前者会根据配置的规则定时将内存中的数据持久化到硬盘上&#xff0c;后者则是在每次执行写命令之后将命令记录下来。两种持久化方式可以单独使用&#xff0c;但是通常会将两者结合使用。 一、持久化 1.1、什么…

MySQL【知识改变命运】04

复习&#xff1a; 1&#xff1a;CURD 1.1Create &#xff08;创建&#xff09; 语法&#xff1a; insert [into] 表名 [column[,column]] valuse(value_list)[,vaule_list]... value_list:value,[value]...创建一个实例表&#xff1a; 1.1.1单⾏数据全列插⼊ values_l…

Python爬虫之正则表达式于xpath的使用教学及案例

正则表达式 常用的匹配模式 \d # 匹配任意一个数字 \D # 匹配任意一个非数字 \w # 匹配任意一个单词字符&#xff08;数字、字母、下划线&#xff09; \W # 匹配任意一个非单词字符 . # 匹配任意一个字符&#xff08;除了换行符&#xff09; [a-z] # 匹配任意一个小写字母 […

CSS之一

目录 简介 CSS 语法规范 CSS 代码风格 1.样式格式书写 2.样式大小写 CSS 基础选择器 选择器分类 标签选择器 类选择器 案例之画盒子 多类型使用 id选择器 通配符选择器 font-family设置字体 字体系列 字体大小 字体粗细 文字样式 字体复合属性 示例 CSS 文…

解决关于HTML+JS + Servlet 实现前后端请求Session不一致的问题

1、前后端不分离情况 在处理session过程中&#xff0c;如果前后端项目在一个容器中&#xff0c;session是可以被获取的。例如如下项目结构&#xff1a; 结构 后端的代码是基本的设置值、获取值、销毁值的内容&#xff1a; 运行结果 由此可见&#xff0c;在前后统一的项目中&a…

《Linux从小白到高手》综合应用篇:详解Linux系统调优之服务器硬件优化

List item 本篇介绍Linux服务器硬件调优。硬件调优主要包括CPU、内存、磁盘、网络等关键硬件组。 1. CPU优化 选择适合的CPU&#xff1a; –根据应用需求选择多核、高频的CPU&#xff0c;以满足高并发和计算密集型任务的需求。CPU缓存优化&#xff1a; –确保CPU缓存&#x…

SAP导出excel报错:发现“EXPORT.XLSX“中的部分内容有问题。是否让我们尽量尝试恢复?如果您信任此工作簿的源,请单击“是”。

1.问题描述&#xff1a;SAP报表程序导出excel的时报错 2.问题原因 文本信息中包含了非法符号&#xff08;SAP不认识的符号&#xff09; 比如&#xff1a;NLSY10 3.解决方式&#xff0c;把这个文本信息特殊符号去掉&#xff0c;就可以恢复正常了。 怎么找这个特殊符号&#…

2019年计算机网络408真题解析

第一题&#xff1a; 解析&#xff1a;OSI参考模型第5层完成的功能 首先&#xff0c;我们需要对OSI参考模型很熟悉&#xff1a;从下到上依次是&#xff1a;物理层-数据链路层-网络层- 运输层-会话层-表示层-应用层&#xff0c;由此可知&#xff0c;题目要问的是会话层的主要功能…

第十五章 RabbitMQ延迟消息之延迟插件

目录 一、引言 二、延迟插件安装 2.1. 下载插件 2.2. 安装插件 2.3. 确认插件是否生效 三、核心代码 四、运行效果 五、总结 一、引言 上一章我们讲到通过死信队列组合消息过期时间来实现延迟消息&#xff0c;但相对而言这并不是比较好的方式。它的代码实现相对来说比…

嵌入式开发:STM32 硬件 CRC 使用

测试平台&#xff1a;STM32G474系列 STM32硬件的CRC不占用MCU的资源&#xff0c;计算速度快。由于硬件CRC需要配置一些选项&#xff0c;配置不对就会导致计算结果错误&#xff0c;导致使用上没有软件计算CRC方便。但硬件CRC更快的速度在一些有时间资源要求的场合还是非…

使用python批量替换文件夹文件名(已亲测)

1. 需要使用高版本的python,本机版本 3.12.4 2. 配置国内Python镜像源 常用的国内Python镜像源&#xff1a; 清华大学TUNA镜像源&#xff1a;这是非常受欢迎的一个镜像源&#xff0c;提供了高速且稳定的服务。 地址&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 临时…