vue3：实现图片放大浏览功能组件

两种实现方式：

1.将原本的盒子与img标签放大至全屏浏览。

2.新建一个div和img标签进行全屏浏览。这样不会改变布局。

第一种：

效果：

组件代码：

<template><div :class="isScreen ? 'fullImg' : 'norImg'"><img:src="props.src"alt="img":width="isScreen ? 'auto' : props.width":height="isScreen ? 'auto' : props.height"/><!-- 放大缩小按钮 --><div class="toBig" @click="showImg"><svgt="1718433997569"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="2426"width="50"height="50"><path :d="iconPath" fill="#140202" p-id="2427"></path></svg></div></div>
</template>
<script setup lang="ts">
import { ref } from "vue";const props = defineProps({src: {type: String,default: "https://picsum.photos/200/300",},width: {type: Number,},height: {type: Number,},
});
let iconPath = ref<string>("M800 163H226.2c-52.8 0-95.6 42.8-95.6 95.6v573.8c0 52.8 42.8 95.6 95.6 95.6H800c52.8 0 95.6-42.8 95.6-95.6V258.6c0-52.8-42.8-95.6-95.6-95.6zM465.3 832.4H250.8c-6.7 0-12.7-2.8-17-7.2-4.6-3.9-7.5-9.6-7.5-16.7V593.3c0-13.2 10.7-23.9 23.9-23.9s23.9 10.7 23.9 23.9l-0.8 157.2 162.3-162.3 33.8 33.8-162.6 162.6h158.5c13.2 0 23.9 10.7 23.9 23.9s-10.7 23.9-23.9 23.9zM800 497.7c0 13.2-10.7 23.9-23.9 23.9s-23.9-10.7-23.9-23.9l0.8-157.2-162.4 162.3-33.8-33.8 162.5-162.5H560.8c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9h214.5c6.7 0 12.7 2.8 17 7.2 4.6 3.9 7.6 9.6 7.6 16.7v215.1z"
);
//是否大屏展示
const isScreen = ref<boolean>(false);
// 点击展示
const showImg = () => {if (isScreen.value) {isScreen.value = false;iconPath.value ="M800 163H226.2c-52.8 0-95.6 42.8-95.6 95.6v573.8c0 52.8 42.8 95.6 95.6 95.6H800c52.8 0 95.6-42.8 95.6-95.6V258.6c0-52.8-42.8-95.6-95.6-95.6zM465.3 832.4H250.8c-6.7 0-12.7-2.8-17-7.2-4.6-3.9-7.5-9.6-7.5-16.7V593.3c0-13.2 10.7-23.9 23.9-23.9s23.9 10.7 23.9 23.9l-0.8 157.2 162.3-162.3 33.8 33.8-162.6 162.6h158.5c13.2 0 23.9 10.7 23.9 23.9s-10.7 23.9-23.9 23.9zM800 497.7c0 13.2-10.7 23.9-23.9 23.9s-23.9-10.7-23.9-23.9l0.8-157.2-162.4 162.3-33.8-33.8 162.5-162.5H560.8c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9h214.5c6.7 0 12.7 2.8 17 7.2 4.6 3.9 7.6 9.6 7.6 16.7v215.1z";} else {isScreen.value = true;iconPath.value ="M810.2 130.2H211.1c-55.1 0-99.8 44.7-99.8 99.8v599.1c0 55.1 44.7 99.8 99.8 99.8h599.1c55.1 0 99.8-44.7 99.8-99.8v-599c0-55.2-44.7-99.9-99.8-99.9z m-324.5 674c0 13.8-11.2 25-25 25s-25-11.2-25-25l0.8-164.1-169.4 169.4-35.3-35.3 169.7-169.7H236c-13.8 0-25-11.2-25-25s11.2-25 25-25h223.9c7 0 13.3 2.9 17.8 7.5 4.8 4.1 7.9 10.1 7.9 17.5v224.7z m299.5-299.6H561.3c-7 0-13.3-2.9-17.8-7.5-4.8-4.1-7.9-10.1-7.9-17.5V255c0-13.8 11.2-25 25-25s25 11.2 25 25l-0.8 164.1 169.4-169.4 35.3 35.3-169.8 169.7h165.5c13.8 0 25 11.2 25 25s-11.2 24.9-25 24.9z";}
};
</script>
<style scoped>
.fullImg {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.5);z-index: 999;display: flex;justify-content: center;align-items: center;
}
.norImg {position: relative;width: auto;height: auto;
}
.toBig {display: none;
}
.norImg:hover .toBig {display: block;position: absolute;right: 5px;top: 5px;cursor: pointer;
}
.fullImg .toBig {display: block;position: absolute;right: 5px;top: 5px;cursor: pointer;
}
</style>

使用组件：

宽高只给一种可以保持图片比例，都不给图片正常大小

<template><showImg :width="300" :height="300" :src="img"></showImg>
</template>
<script setup lang="ts">
import showImg from "../components/showImg.vue";
import img from "../assets/demoIMG.jpg";
</script>

第二种：

效果：

组件代码：

<template><div class="norImg"><img:src="props.src"alt="img":width="props.width":height="props.height"/><!-- 放大缩小按钮 --><div class="toBig" @click="showImg"><svgt="1718433997569"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="2426"width="50"height="50"><pathd="M800 163H226.2c-52.8 0-95.6 42.8-95.6 95.6v573.8c0 52.8 42.8 95.6 95.6 95.6H800c52.8 0 95.6-42.8 95.6-95.6V258.6c0-52.8-42.8-95.6-95.6-95.6zM465.3 832.4H250.8c-6.7 0-12.7-2.8-17-7.2-4.6-3.9-7.5-9.6-7.5-16.7V593.3c0-13.2 10.7-23.9 23.9-23.9s23.9 10.7 23.9 23.9l-0.8 157.2 162.3-162.3 33.8 33.8-162.6 162.6h158.5c13.2 0 23.9 10.7 23.9 23.9s-10.7 23.9-23.9 23.9zM800 497.7c0 13.2-10.7 23.9-23.9 23.9s-23.9-10.7-23.9-23.9l0.8-157.2-162.4 162.3-33.8-33.8 162.5-162.5H560.8c-13.2 0-23.9-10.7-23.9-23.9s10.7-23.9 23.9-23.9h214.5c6.7 0 12.7 2.8 17 7.2 4.6 3.9 7.6 9.6 7.6 16.7v215.1z"fill="#140202"p-id="2427"></path></svg></div></div><div class="fullImg" v-if="isScreen"><img :src="props.src" alt="img" /><div class="toBig" @click="showImg"><svgt="1718433997569"class="icon2"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="2426"width="50"height="50"><pathd="M810.2 130.2H211.1c-55.1 0-99.8 44.7-99.8 99.8v599.1c0 55.1 44.7 99.8 99.8 99.8h599.1c55.1 0 99.8-44.7 99.8-99.8v-599c0-55.2-44.7-99.9-99.8-99.9z m-324.5 674c0 13.8-11.2 25-25 25s-25-11.2-25-25l0.8-164.1-169.4 169.4-35.3-35.3 169.7-169.7H236c-13.8 0-25-11.2-25-25s11.2-25 25-25h223.9c7 0 13.3 2.9 17.8 7.5 4.8 4.1 7.9 10.1 7.9 17.5v224.7z m299.5-299.6H561.3c-7 0-13.3-2.9-17.8-7.5-4.8-4.1-7.9-10.1-7.9-17.5V255c0-13.8 11.2-25 25-25s25 11.2 25 25l-0.8 164.1 169.4-169.4 35.3 35.3-169.8 169.7h165.5c13.8 0 25 11.2 25 25s-11.2 24.9-25 24.9z"fill="#140202"p-id="2427"></path></svg></div></div>
</template>
<script setup lang="ts">
import { ref } from "vue";const props = defineProps({src: {type: String,default: "https://picsum.photos/200/300",},width: {type: Number,},height: {type: Number,},
});//是否大屏展示
const isScreen = ref<boolean>(false);
// 点击展示
const showImg = () => {if (isScreen.value) {isScreen.value = false;} else {isScreen.value = true;}
};
</script>
<style scoped>
.fullImg {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.5);z-index: 999;display: flex;justify-content: center;align-items: center;
}
.norImg {position: relative;width: auto;height: auto;
}
.toBig {display: none;
}
.norImg:hover .toBig {display: block;position: absolute;right: 5px;top: 5px;cursor: pointer;
}
.fullImg .toBig {display: block;position: absolute;right: 5px;top: 5px;cursor: pointer;
}
.icon2:hover path {fill: #fff;
}
</style>

使用组件：

<template><div class="page"><div class="mainBox"><showImg2 :src="demoImg" :width="300" /><showImg2 :src="demoImg" :width="300" /><showImg2 :src="demoImg" :width="300" /><showImg2 :src="demoImg" :width="300" /><showImg2 :src="demoImg" :width="300" /><showImg2 :src="demoImg" :width="300" /><showImg2 :src="demoImg" :width="300" /><showImg2 :src="demoImg" :width="300" /></div></div>
</template>
<script setup lang="ts">
import demoImg from "../assets/demoIMG.jpg";
import showImg2 from "../components/showImg2.vue";
</script>
<style scoped>
.page {width: 100vw;height: 100vh;display: flex;justify-content: center;align-items: center;
}
.mainBox {width: 1200px;height: 1200px;display: flex;border: 1px solid #000;justify-content: space-between;align-items: center;flex-wrap: wrap;
}
</style>

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

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

相关文章

Confluence是否免费？你需要知道的都在这里！

Confluence是否免费？你需要知道的都在这里！

根据Atlassian官方信息&#xff0c;可以确定的是 Confluence 并不免费&#xff0c;但为10人以下团队提供了免费版本。免费版可以使用不限量的页面、空间&#xff0c;但只有2GB的存储空间和3个活动白板。但国内有不少公司通过使用破解版的方式来免费使用Cofluence。下面本文将详…
阅读更多...
【什么！Grok记录被打破了】坏消息不是Meta的 llama3 400，好消息是Nvidia发布的Nemotron-4 340B且支持开源

【什么！Grok记录被打破了】坏消息不是Meta的 llama3 400，好消息是Nvidia发布的Nemotron-4 340B且支持开源

Nvidia 发布了开创性的开放模型系列 “Nemotron-4 340B”&#xff0c;再次巩固了其作为人工智能创新领域无可争议的领导者的地位。这一发展标志着人工智能行业的一个重要里程碑&#xff0c;因为它使各行各业的企业能够创建功能强大的特定领域 LLM&#xff0c;而无需大量昂贵的真…
阅读更多...
深入分析 Android BroadcastReceiver (三)

深入分析 Android BroadcastReceiver (三)

文章目录 深入分析 Android BroadcastReceiver (三)1. 广播消息的优缺点及使用场景1.1 优点1.2 缺点 2. 广播的使用场景及代码示例2.1. 系统广播示例&#xff1a;监听网络状态变化 2.2. 自定义广播示例&#xff1a;发送自定义广播 2.3. 有序广播示例&#xff1a;有序广播 2.4. …
阅读更多...
线代知识点总结

线代知识点总结

目录 一.初等行/列变换 1.计算行列式时&#xff0c;行列变换都可 2.求矩阵的秩时&#xff0c;行列变换都可 3.解线性方程组时&#xff0c;仅能使用初等行变换 4.判定解的情况&#xff0c;单纯求r(A),r(A,b)的过程行列变换都可 5.求向量组极大无关组、线性表出关系&#x…
阅读更多...
汽车级TPSI2140QDWQRQ1隔离式固态继电器，TMUX6136PWR、TMUX1109PWR、TMUX1133PWR模拟开关与多路复用器（参数）

汽车级TPSI2140QDWQRQ1隔离式固态继电器，TMUX6136PWR、TMUX1109PWR、TMUX1133PWR模拟开关与多路复用器（参数）

1、TPSI2140-Q1 是一款隔离式固态继电器&#xff0c;专为高电压汽车和工业应用而设计。 TPSI2140-Q1 与 TI 具有高可靠性的电容隔离技术和内部背对背 MOSFET 整合在一起&#xff0c;形成了一款完全集成式解决方案&#xff0c;无需次级侧电源。 该器件的初级侧仅由 9mA 的输入电…
阅读更多...
线程介绍及其Java如何用Thread 类创建线程和操作线程方法

线程介绍及其Java如何用Thread 类创建线程和操作线程方法

目录 一、进程和线程1.1 进程特征 2.2 线程特征 2.3 区别 二、利用Thread类创建线程2.1 通过创建Thread子类&#xff0c;重写run()方法2.2 通过实现Runnable接口&#xff0c;重写run()方法2.3. Callable接口 FutureTask 创建线程2.3 三种方法区别1. 通过创建Thread子类&#x…
阅读更多...
SQL深度解析：掌握这些技巧，让你的数据库查询如虎添翼！

SQL深度解析：掌握这些技巧，让你的数据库查询如虎添翼！

前言 随着大数据时代的来临&#xff0c;数据库的角色愈发重要。SQL作为使用最为广泛的数据查询语言&#xff0c;其深度解析与优化对于数据密集型应用来说至关重要。掌握高级SQL技巧不仅可以提升开发效率&#xff0c;还能显著提高数据查询的性能和灵活性。本文将探讨一些关键的S…
阅读更多...
修改SubVI的LabVIEW默认搜索路径

修改SubVI的LabVIEW默认搜索路径

在启动顶级VI后&#xff0c;LabVIEW可能会遇到找不到subVI的情况。这通常是由于subVI的路径发生了变化或没有被正确配置。 LabVIEW默认搜索路径 默认情况下&#xff0c;LabVIEW会按以下顺序搜索文件位置&#xff08;*表示LabVIEW将搜索子目录&#xff09;&#xff1a; <t…
阅读更多...
如何从印刷体的图片中把手写体部分统统去掉？--免费途径

如何从印刷体的图片中把手写体部分统统去掉？--免费途径

AI图像处理技术 我是从国外某个网站上找到在线AI免费credit的处理方式的。国内的基本没有全功能试用、或者即使收费也不好用。 国内的差距主要是&#xff1a;1、对图片分辨率和大小有更多限制&#xff0c;即使收费用户也是&#xff1b;2、需要安装app之类&#xff0c;然后连线…
阅读更多...
MongoDB使用$addToSet向数组中添加元素

MongoDB使用$addToSet向数组中添加元素

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第66篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…
阅读更多...
驱动开发（四）：Linux内核中断

驱动开发（四）：Linux内核中断

驱动开发系列文章&#xff1a; 驱动开发&#xff08;一&#xff09;&#xff1a;驱动代码的基本框架 驱动开发&#xff08;二&#xff09;&#xff1a;创建字符设备驱动 驱动开发&#xff08;三&#xff09;&#xff1a;内核层控制硬件层 驱动开发&#xff08;四&#xf…
阅读更多...
java：一个springfox swagger2的简单例子

java：一个springfox swagger2的简单例子

# 示例程序 【pom.xml】 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><version>2.3.12.RELEASE</version> </dependency> <dependency><groupId>…
阅读更多...
视图-什么是（VIEW）？怎么创建(CREATE VIEW)？怎么删除(DROP)?怎么用（SELECT/INSERT/UPDATE/DELETE）？

视图-什么是（VIEW）？怎么创建(CREATE VIEW)？怎么删除(DROP)?怎么用（SELECT/INSERT/UPDATE/DELETE）？

一、引言 之前对数据库的操作都是针对基本关系表&#xff0c;操作都是在数据库的全局逻辑模式上进行的&#xff0c;而在实际的数据库系统中&#xff0c;可能用户只关心或只被允许使用数据库中的某些基本关系表或基本关系表中的某些属性列&#xff0c;这些数据构成了数据库的外…
阅读更多...
vue（v-if,v-else-if-else-show）

vue（v-if,v-else-if-else-show）

基本应用 例子 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTE-8"> <meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-w…
阅读更多...
LabView_波形控件

LabView_波形控件

波形图表 将一定数量的数据点存储在缓冲区&#xff0c;并通过这种方式存储并显示这些数据点。当缓冲区被填满后&#xff0c;波形图表将会用新的数据点覆盖缓冲区中存在时间最久的数据点。 当数据点可用时&#xff0c;波形图表将显示已有的数据点外加最新接收到的数据点 。 您可…
阅读更多...
NVIDIA Triton系列02-功能与架构简介

NVIDIA Triton系列02-功能与架构简介

NVIDIA Triton系列02-功能与架构简介 B站&#xff1a;肆十二-的个人空间-肆十二-个人主页-哔哩哔哩视频 (bilibili.com) 博客&#xff1a;肆十二-CSDN博客 问答&#xff1a;(10 封私信 / 72 条消息) 肆十二 - 知乎 (zhihu.com) 前面文章介绍微软 Teams 会议系统、微信软件与腾讯…
阅读更多...
Thinkphp一文鸡富贵鸡玫瑰庄园富农场仿皮皮果理财农场源码

Thinkphp一文鸡富贵鸡玫瑰庄园富农场仿皮皮果理财农场源码

Thinkphp一文鸡富贵鸡玫瑰庄园富农场仿皮皮果理财农场源码&#xff0c;喜欢的朋友可以下载研究 一文鸡富贵鸡玫瑰庄园富农场仿皮皮果理财农场源码
阅读更多...
Django初学者指南

Django初学者指南

文章目录 Django初学者指南1 Django简介1.1 Django的历史1.2 使用Django的知名网站1.4 Django的主要特点1.5 Django的工作原理 2 Django 使用2.1 Django 支持的 Python 版本2.2 Django 版本 3 Django 开发 Web 程序3.1 安装Django3.2 创建Django项目3.3 运行开发服务器3.4 创建…
阅读更多...
数据结构02 队列及其应用【C++实现】

数据结构02 队列及其应用【C++实现】

目录 队列及其特点 利用数组模拟队列的基本操作 创建队列 空队条件 元素入队 元素出队 模拟超市收银问题 队列操作 初始化 入队操作 出队操作 取出队首元素 STL模板中队列的基本使用 训练&#xff1a;约瑟夫问题 参考程序 队列及其特点 队列是一种特殊的线性表&am…
阅读更多...
求导，积分

求导，积分

求导公式&#xff1a; 复合函数求导法则&#xff1a;两个函数导函数的乘积. 例如&#xff1a;f(x)2x1,f(x)2,g(x)x^24x4,g(x)2x4 那么复合函数&#xff1a; g(f(x))(2x1)^24(2x1)4 把&#xff08;2x1&#xff09;看做整体,则g2(2x1)4 然后再求&#xff08;2x1&#xff09;的导函…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023