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

news2024/11/27 19:51:27

两种实现方式：

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">
      <svg
        t="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">
      <svg
        t="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="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">
      <svg
        t="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"
      >
        <path
          d="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.coloradmin.cn/o/1825614.html

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

相关文章

图书管理系统（SpringBoot+SpringMVC+MyBatis）

图书管理系统（SpringBoot+SpringMVC+MyBatis）

目录 1.数据库表设计 2.引入MyBatis和MySQL驱动依赖 3.配置数据库&日志 4.Model创建 5.用户登录功能实现 6.实现添加图书功能 7.实现翻页功能 1.数据库表设计 数据库表是应⽤程序开发中的⼀个重要环节, 数据库表的设计往往会决定我们的应⽤需求是否能顺利实现, 甚至决…
阅读更多...
AI Vs 作家？Groqbook: AI写书神器，使用 Groq 和 Llama3 几秒生成一本完整的书籍！

AI Vs 作家？Groqbook: AI写书神器，使用 Groq 和 Llama3 几秒生成一本完整的书籍！

✨点击这里✨&#xff1a;&#x1f680;原文链接&#xff1a;&#xff08;更好排版、视频播放、社群交流、最新AI开源项目、AI工具分享都在这个公众号&#xff01;&#xff09; AI Vs 作家&#xff1f;Groqbook: AI写书神器&#xff0c;使用 Groq 和 Llama3 几秒生成一本完整的…
阅读更多...
【Java】解决Java报错：InterruptedException in Multi-threaded Applications

【Java】解决Java报错：InterruptedException in Multi-threaded Applications

文章目录 引言一、InterruptedException的定义与概述1. 什么是InterruptedException&#xff1f;2. InterruptedException的常见触发场景3. 示例代码 二、解决方案1. 正确处理InterruptedException2. 合理使用中断机制3. 使用更高层次的并发工具 三、最佳实践1. 避免吞掉Interr…
阅读更多...
网络安全形势迫在眉睫！云WAF保护私有云安全！

网络安全形势迫在眉睫！云WAF保护私有云安全！

业务上云面临新的WEB安全挑战 目前&#xff0c;所有的组织都在积极地接受企业的“云”&#xff0c;推进数字化变革。在服务云计算和私有云平台构建中&#xff0c;用户除了要面对各种常见的网络攻击&#xff0c;还需要面对虚拟环境下的非授权访问、虚拟机逃逸和敏感信息泄漏等问…
阅读更多...
QT小技巧

QT小技巧

QT小技巧 滑条的美化 美化前 代码如下 //滑条的美化ui->horizontalSlider->setStyleSheet("QSlider::groove:horizontal {""border:1px solid skyblue;""background-color:skyblue;""height:10px;""border-radius:5px…
阅读更多...
Vscode flake8插件 python代码语法格式检测/代码过长等误报设置

Vscode flake8插件 python代码语法格式检测/代码过长等误报设置

在vscode中python格式检测使用flake8插件很方便&#xff0c;但是经常会报出一些不必要错误&#xff0c;影响开发效率&#xff0c;忽略这些错误可以帮助减少对于特定项目可能不太关键的PEP 8警告或代码风格问题的干扰&#xff0c;特别是在项目有自己的格式化和编码标准时。使用f…
阅读更多...
【Windows】配置Flutter开发环境

【Windows】配置Flutter开发环境

一、下载 flutter sdk 点此跳至下载官网 下载好flutter sdk&#xff0c;并解压到自定义的位置。 二、配置环境变量 此电脑 --> 右键 选择 属性 --> 点击 高级系统设置 --> 会弹出系统属性的窗口&#xff0c;点击 环境变量 按钮 1.配置加速镜像地址 PUB_HOSTED_…
阅读更多...
Cheat Engine 学习

Cheat Engine 学习

文章目录 Exact Value scanning任务实现步骤Unknown initial value任务实现步骤原理说明Floating points任务实现步骤原理说明Code finder任务实现步骤原理说明Pointers任务实现步骤原理说明Change Pointer 操作：Active（活跃状态）和数值修改：Code Injection任务概述实现步骤…
阅读更多...
IS022000认证：食品安全管理的金标准

IS022000认证：食品安全管理的金标准

食品安全是食品行业的命脉&#xff0c;IS022000食品安全管理体系认证作为最权威的认证之一&#xff0c;为企业提供了强有力的保障。要理解IS022000认证的意义&#xff0c;我们需要先了解它与HACCP和IS09001认证的关系。 HACCP&#xff08;Hazard Analysis and Critical Control…
阅读更多...
【计算机毕业设计】基于springboot的大创管理系统【源码+lw+部署文档】

【计算机毕业设计】基于springboot的大创管理系统【源码+lw+部署文档】

包含论文源码的压缩包较大&#xff0c;请私信或者加我的绿色小软件获取 免责声明&#xff1a;资料部分来源于合法的互联网渠道收集和整理&#xff0c;部分自己学习积累成果&#xff0c;供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…
阅读更多...
从零入手人工智能（3）—— 线性回归

从零入手人工智能（3）—— 线性回归

1.前言 实践是验证和理解理论知识的重要手段&#xff0c;在进行实际编程之前&#xff0c;我们首先确保编程环境已正确搭建。若编程环境尚未搭建完毕&#xff0c;建议参照《从零入手人工智能&#xff08;2&#xff09;——搭建开发环境》&#xff0c;文章链接如下&#xff1a; …
阅读更多...
HAL库开发--第一盏灯

HAL库开发--第一盏灯

知不足而奋进 望远山而前行 目录 文章目录 前言 学习目标 学习内容 需求 开发流程 项目创建 芯片配置 功能配置 时钟配置 项目配置 编写代码 编译测试 烧录失败解决 ​编辑 总结 前言 在嵌入式系统开发中&#xff0c;掌握HAL库开发流程、STMCubeMX配置过程以及…
阅读更多...
PTrade量化策略API说明—PTrade如何获取分时成交行情：get_tick_direction

PTrade量化策略API说明—PTrade如何获取分时成交行情：get_tick_direction

get_tick_direction – 获取分时成交行情 get_tick_direction(symbolsNone, query_date0, start_pos0, search_direction1, data_count50) 使用场景 该函数在交易模块可用 接口说明 该接口用于获取当日分时成交行情数据。 注意事项&#xff1a; 1、沪深市场都有分时成交数…
阅读更多...
C#.Net筑基-类型系统①基础

C#.Net筑基-类型系统①基础

C#.Net的BCL提供了丰富的类型&#xff0c;最基础的是值类型、引用类型&#xff0c;而他们的共同&#xff08;隐私&#xff09;祖先是 System.Object&#xff08;万物之源&#xff09;&#xff0c;所以任何类型都可以转换为Object。 01、数据类型汇总 C#.NET 类型结构总结如下图…
阅读更多...
Linux C语言：函数的基本用法及传参

Linux C语言：函数的基本用法及传参

一、函数的基本用法 1、main函数 int main(int argc, const char * argv[]) { printf("Hello world\n"); return 0; }数据类型 函数名称 (参数) { //.... return 表达式 } 2、函数 函数是一个完成特定功能的代码模块&#xff0c;其程序代码独立&#xff0c;通常要…
阅读更多...
YOLOv8可视化界面PYQT5

YOLOv8可视化界面PYQT5

yolov8&#xff0c;可视化界面pyqt。支持图片检测&#xff0c;视频检测&#xff0c;摄像头检测等&#xff0c;实时显示检测画面。支持自定义数据集&#xff0c;计数&#xff0c;fps展示……,即插即用&#xff0c;无需更改太多代码
阅读更多...
Redis数据结构学习

Redis数据结构学习

Redis 关于redis相关的技术文章我一直没什么思路 直到最近的端午节,我偶然和一个程序员朋友聊到了关于redis数据结构相关的知识点, 所以我决定写一篇文章记录一下 首先我们需要知道redis支持哪些数据类型 Strings (字符串)Lists(列表)Hashes(哈希)Sets(集合)Sorted Sets(有序…
阅读更多...
【机器学习】集成学习方法：Bagging与Boosting的应用与优势

【机器学习】集成学习方法：Bagging与Boosting的应用与优势

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 引言一、集成学习的定义二、Bagging方法1. 随机森林&#xff08;Random Forest&#xff09;2. 其他Bagging方法 二、Boosting方法1. 梯度提升树&#xff08;Gradient Boosting Machine, GBM&#xff09;解释GBM的基本原理和…
阅读更多...
Flutter 自定义日志模块设计

Flutter 自定义日志模块设计

前言 村里的老人常说&#xff1a;“工程未动&#xff0c;日志先行。” 有效的利用日志&#xff0c;能够显著提高开发/debug效率&#xff0c;否则程序运行出现问题时可能需要花费大量的时间去定位错误位置和出错原因。 然而一个复杂的项目往往需要打印日志的地方比较多&#…
阅读更多...
[Python学习篇] Python循环语句

[Python学习篇] Python循环语句

while 循环 语法&#xff1a; while 条件: 条件成立后会重复执行的代码 ...... 示例1&#xff1a;死循环 # 这是一个死循环示例 while True:print("我正在重复执行")示例2&#xff1a;循环指定次数 i 1 while i < 5:print(f"执行次数 {i}")…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023