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。下面本文将详…
阅读更多...
GitHub每日最火火火项目（6.15）

GitHub每日最火火火项目（6.15）

好的&#xff0c;以下是按照你的要求对每个项目进行的总结&#xff1a; 项目名称&#xff1a;huggingface / diffusers 项目介绍&#xff1a;diffusers 是一个用于图像和音频生成的扩散模型库。它提供了一系列预训练模型和工具&#xff0c;使得用户可以轻松地进行图像和音频的生…
阅读更多...
【什么！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 的输入电…
阅读更多...
MySQL入门学习-子查询.ALL

MySQL入门学习-子查询.ALL

子查询是指在一条查询语句中嵌套另一条查询语句。 在 MySQL 中&#xff0c;子查询 ALL 表示子查询结果中的所有值都满足某个条件。 例如&#xff1a; sql SELECT * FROM table1 WHERE column1 > ALL (SELECT column2 FROM table2); 上述代码表示从表 table1 中选择所有 c…
阅读更多...
线程介绍及其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…
阅读更多...
Android BMI程序设计

Android BMI程序设计

android:layout_width“match_parent” android:layout_height“wrap_content” android:gravity“left” android:text“体重&#xff08;KG&#xff09;” android:textSize“25sp” /> <EditText android:id“id/tz” android:layout_width“match_parent” …
阅读更多...
修改SubVI的LabVIEW默认搜索路径

修改SubVI的LabVIEW默认搜索路径

在启动顶级VI后&#xff0c;LabVIEW可能会遇到找不到subVI的情况。这通常是由于subVI的路径发生了变化或没有被正确配置。 LabVIEW默认搜索路径 默认情况下&#xff0c;LabVIEW会按以下顺序搜索文件位置&#xff08;*表示LabVIEW将搜索子目录&#xff09;&#xff1a; <t…
阅读更多...
C# —— 类型转换

C# —— 类型转换

类型转换就是不同变量数据类型之间进行互相转换 隐式转换 : 默认是C#中安全的进行数据转换的方式 一般不会造成数据丢失 相同数据类型之间的隐式转换 有符号 long -> int ->short ->sbyte long l 1; int i 2; short s 3; sbyte sb 4; // 大范围可以装小范围的 l…
阅读更多...
如何从印刷体的图片中把手写体部分统统去掉？--免费途径

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

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

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

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第66篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…
阅读更多...
python面试题5：浅拷贝和深拷贝之间有什么区别？（难度--中等）

python面试题5：浅拷贝和深拷贝之间有什么区别？（难度--中等）

文章目录 题目回答1.浅拷贝2.深拷贝 题目 浅拷贝和深拷贝之间有什么区别&#xff1f; 回答 1.浅拷贝 浅拷贝对于不可变数据&#xff0c;如字符串&#xff0c;整数&#xff0c;数组&#xff0c;往往是直接复制其的值。对于可变对象如列表&#xff0c;则是指向同一个地址。这…
阅读更多...
C# OpenCvSharp Mat操作-创建Mat-eye

C# OpenCvSharp Mat操作-创建Mat-eye

&#x1f31f; OpenCvSharp 中的 eye 函数详解 &#x1f31f; 在OpenCvSharp中&#xff0c;eye函数用于创建一个单位矩阵&#xff08;identity matrix&#xff09;&#xff0c;即对角线为1&#xff0c;其他元素为0的矩阵。这个函数有两个重载版本&#xff1a; static MatExpr…
阅读更多...
驱动开发（四）：Linux内核中断

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

驱动开发系列文章&#xff1a; 驱动开发&#xff08;一&#xff09;&#xff1a;驱动代码的基本框架 驱动开发&#xff08;二&#xff09;&#xff1a;创建字符设备驱动 驱动开发&#xff08;三&#xff09;&#xff1a;内核层控制硬件层 驱动开发&#xff08;四&#xf…
阅读更多...
自然资源-测绘地信专业术语，值得收藏！

自然资源-测绘地信专业术语，值得收藏！

自然资源-测绘地信专业术语&#xff0c;值得收藏&#xff01; 1、1954年北京坐标系 1954年我国决定采用的国家大地坐标系&#xff0c;实质上是由原苏联普尔科沃为原点的1942年坐标系的延伸。 2、1956年黄海高程系统 根据青岛验潮站1950年一1956年的验潮资料计算确定的平均海面…
阅读更多...
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;这些数据构成了数据库的外…
阅读更多...
最新文章

Copyright @ 2022~2023