Vue3图片显示组件,支持多张图片,缩略图,全屏动态加载大图

通过imgs参数传入多张图片,图片路径中包含 /small/ 表示是缩略图,将 /small/ 改为 / 即是该图片的大图。组件首先显示缩略图,然后在mounted事件中js动态加载大图,加载完毕后用大图的内容替换缩略图,实现高清图片的丝滑加载显示。

点击图片后进入全屏模式,可浏览整组图片,同样会在后台用Js动态加载大图,实现高清图片的丝滑加载显示。

使用组件:import BudaImg from 'Img.vue'
<BudaImg :imgs="['a.jpg', 'b.jpg'].map(name=>({ alt: name, src: `/images/houses/small/${name}`}))" :img_class="{detail_image: true}"/>  以下是Img.vue的内容:<script setup>
import { ref, reactive, computed, onMounted , onUnmounted, nextTick } from 'vue'const props = defineProps({imgs: Array,img_class:{type: Object,default(rawProps) { return { };  }},
}); 
const {imgs, img_class}=props; const imgs_len=imgs.length;
let index=ref(0), fullscreen=ref(false), loading=ref(false); let container_class=computed(() => ({ fullscreen: fullscreen.value }) );
const img = computed(() => imgs[index.value] ); let img_src = ref(img.value.src);async function GetImgBig(img){if(img.big) return; if(!img.src.includes("/small/")) {img.big=img.src; return;} img.big=await GetBlobUrl(img.src.replace("/small/", "/")); console.log('got big image: ', img.src);
}
async function GetNextImgBig(){for(let i=0;i<imgs_len;i++){ if(!fullscreen.value) break; let img=imgs[i]; if(img.big) continue; await GetImgBig(img); break; }
}
onMounted(async () => { setTimeout(async () => {await GetImgBig(img.value); img_src.value=img.value.big; // console.log('big img', img_src.value);}, 1000);
});
onUnmounted(()=>{   
});async function ClickImg(){if(fullscreen.value) return; fullscreen.value=true; document.body.style.overflow = 'hidden'; // 隐藏页面滚动条await nextTick(); await GetNextImgBig();
}
function ClickCloseImg(){fullscreen.value=false; document.body.style.overflow = ''; // 恢复页面滚动条
}
async function ClickNextImg(type){ let v=index.value; if(type=='left') { v--; if(v<0) v=0; } else { v++; if(v>=imgs_len) v=imgs_len-1; }index.value=v; let img=imgs[v]; loading.value=true; await GetImgBig(img); loading.value=false; img_src.value=img.big; await nextTick(); await GetNextImgBig();
}async function fetchBlob(url) { const response = await fetch(url); const blob = await response.blob(); return blob; }
async function GetBlobUrl(big_src) {  return URL.createObjectURL(await fetchBlob(big_src)); }</script><template><div :class="container_class"><img :src="img_src" :alt="img.alt" :title="img.alt" :class="img_class" @click="ClickImg"/><div v-if="fullscreen && loading" class="loading">正在加载图片...</div><div class="img_bottom_bar" v-if="fullscreen"><div @click="ClickNextImg('left')" class="left_img_c"><div><div v-if="imgs_len>1 && index>0"><img src="@/assets/left.svg" alt="上一张" title="上一张" class="left_img"/><div>上一张</div></div></div></div><div class="mid_img_c"><div>第{{index+1}}张 / 共{{imgs_len}}张</div></div><div @click="ClickNextImg('right')" class="right_img_c"><div><div v-if="imgs_len>1 && index<imgs_len-1"><div>下一张</div><img src="@/assets/right.svg" alt="下一张" title="下一张" class="right_img"/></div></div></div></div><img v-if="fullscreen" src="@/assets/close.svg" class="close_img" alt="关闭全屏" title="关闭全屏" @click="ClickCloseImg"/>    </div>
</template><style scoped>.loading{ color: var(--color-site-title); z-index: 999; position:fixed; left: calc(50vw-3rem); top: 50vh; font-size: 2rem; }
.center{text-align: center;}  
.fullscreen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center;  align-items: center; background-color: #222222ee;  overflow: hidden;  }
.close_img{ width: 3rem; height: 3rem; cursor:pointer; }
.fullscreen .close_img{ position: fixed; right: 0; top:0;}
.img_bottom_bar{position:fixed; bottom: 0; width: 100vw; display: flex; color: var(--color-site-title); align-items: center; font-size: 1.5rem;}
.left_img_c, .mid_img_c, .right_img_c {  display: flex; align-items: center; justify-content: center;   }
.left_img_c > div , .right_img_c > div { width: 7rem; display: flex; align-items: center; justify-content: center; }
.mid_img_c{ flex-grow:1; }
.left_img_c > div > div , .right_img_c > div > div { display: flex; align-items: center; justify-content: center; cursor:pointer; }
.left_img, .right_img { width: 2rem; height: 2rem; }</style>

以上如有错漏之处,敬请大家指正。我的联系方式:
微信:TobeBuda
Email/Paypal: jinmin.si@outlook.com
邀请您加入「社区资讯服务」创业微信群,共同探讨打造社区资讯服务的美好未来。

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

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

相关文章

尚品汇-(四)

&#xff08;1&#xff09;商品的基本知识 1.1基本信息—分类 一般情况可以分为两级或者三级。咱们的项目一共分为三级&#xff0c;即一级分类、二级分类、三级分类。 比如&#xff1a;家用电器是一级分类&#xff0c;电视是二级分类&#xff0c;那么超薄电视就是三级分类。…

网页如何发布到服务器上

将网页发布到服务器上的过程涉及多个步骤&#xff0c;包括准备阶段、选择托管提供商、发布网站等。12 准备阶段&#xff1a; 确保在本地开发环境中对网站进行了充分的测试&#xff0c;包括功能测试、性能测试和安全测试。 检查Web.config文件&#xff0c;确保所有的配置设置…

Java中的负载均衡与服务治理

Java中的负载均衡与服务治理 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们来探讨Java中的负载均衡与服务治理&#xff0c;这两者在现代分布式系统和微…

Android使用MPAndroidChart 绘制折线图

效果图&#xff1a; 1.导入依赖 1.1在项目根目录下的build.gradle文件中添加代码&#xff08;注意不是app下的build.gradle&#xff09;&#xff1a; maven { url https://jitpack.io } 1.2在app下的build.gradle中的依赖下添加&#xff1a; implementation com.github.PhilJa…

CentOS 7 内核 3.10 升级 6.5.2 (RPM 直装 + 源码编译)

方案一 直接基于 RPM 在线升级&#xff08;简单&#xff0c;速度快&#xff09; rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org yum install https://www.elrepo.org/elrepo-release-7.el7.elrepo.noarch.rpm -y # &#xff08;选项一&#xff09;升级最新版内…

昇腾Ascend上使用分布式训练

一、环境搭建 1、使用hccn_tool配置昇腾训练卡的芯片网络&#xff0c;包括ip地址和掩码 命令原型 hccn_tool [-i %d] -ip -s [address %s] [netmask %s] 使用样例(配置两张卡)&#xff1a; hccn_tool -i 0 -ip -s address 192.168.2.10 netmask 255.255.255.0 hccn_tool …

IOS Swift 从入门到精通:协议和扩展

文章目录 协议协议继承扩展协议扩展面向协议的编程总结&#xff1a; 今天你将学习一些真正的 Swifty 功能&#xff1a;协议和面向协议的编程&#xff08;POP&#xff09;。 POP 摒弃了庞大而复杂的继承层次结构&#xff0c;代之以更小、更简单、可以组合在一起的协议。这确实应…

Magento1与Magento2的区别

本人接触magento有些年头了。。。 2012年开始用magento 1.7。2016年开始用magento2.0。 截止到目前。M1最新版本是1.9.3.3。 M2最新版本是2.2.2。 想当年第一次接触magento的时候&#xff0c;是跟同事一起&#xff0c;网上下载的Alan Storm的深入理解magento系统&#xff0c;…

【UML用户指南】-20-对基本行为建模-交互图

目录 1、概述 2、顺序图 2.1、两个不同于通信图的特征&#xff1a; 2.1.1、顺序图有对象生命线 2.1.2、顺序图有控制焦点 2.2、结构化控制 2.2.1、可选执行opt 2.2.2、条件执行alt 2.2.3、并行执行par 2.2.4、循环迭代执行loop 2.3、嵌套活动图 3、通信图 3.1、两…

【Python】实用脚本--大疆精灵4rtk照片信息提取

你是否想过&#xff0c;为啥就是拍个照片&#xff0c;为啥会占用几十上百兆&#xff1f; 其实除了照片的像素&#xff0c;照片里还附带了很多其他信息。 这个脚本是之前读取大疆精灵4rtk拍摄的照片信息用的&#xff0c;发出来&#xff0c;按需取用。 #!/usr/bin/env python # …

jnp.matmul和jnp.dot的区别?

jnp.matmul 和 jnp.dot 都是用于矩阵乘法的函数&#xff0c;但它们在处理多维数组&#xff08;即张量&#xff09;时有不同的行为。以下是它们的区别和具体用法&#xff1a; jnp.dot 主要用于向量点积和矩阵乘法。对于一维数组&#xff0c;计算向量的点积。对于二维数组&…

Flutter第十二弹 Flutter多平台运行

目标&#xff1a; 1.在多平台调试启动Flutter程序运行 一、安卓模拟器 1.1 检查当前Flutter适配的版本 flutter doctor提供了Flutter诊断。 $ flutter doctor --verbose /Users/zhouronghua/IDES/flutter/bin/flutter doctor --verbose [✓] Flutter (Channel master, 2.1…

【代码随想录算法训练Day45】LeetCode 198.打家劫舍、LeetCode 213.打家劫舍II、LeetCode 337.打家劫舍III

Day45 动态规划第七天 LeetCode 198.打家劫舍 dp数组含义&#xff1a;考虑偷前i家后的最大钱币为dp[i] 递推公式&#xff1a;dp[i]max(dp[i-2]nums[i],dp[i-1]) 初始化&#xff1a;dp[0]nums[0],dp[1]max(dp[0],dp[1]),dp[i]任意值 遍历顺序&#xff1a;从小到大 class Solu…

【硬件开发】电阻

电阻精度 电阻封装和功率的关系 裕度 50%的裕度&#xff0c;0603封装的功率为0.1W的情况下&#xff0c;实际只能使用0.05W的功率。 精度 温漂 零欧电阻 用法 1.跳线 如果不用某条线路&#xff0c;直接不焊零欧电阻就行 2.预留 后期调试看看需不需要更换为其他阻值例如33R的…

Docker 下载与安装以及配置

安装yum工具 yum install -y yum-ulits配置yum源 阿里云源 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo安装Docker 17.03后为两个版本&#xff1a; 社区版&#xff08;Community Edition&#xff0c;缩写为 CE&#x…

Amazon 文本数据提取服务-Textract对比Amazon 自然语言处理服务-Comprehend

前言 在人工智能技术不断进步的当下&#xff0c;自然语言处理&#xff08;NLP&#xff09;和机器学习正变得越来越重要。Amazon Web Services&#xff08;AWS&#xff09;为我们提供了Amazon Textract 和 Amazon Comprehend这两大服务&#xff0c;帮助我们更好地处理和分析文本…

leetcode-15-[654]最大二叉树[617]合并二叉树[700]二叉搜索树中的搜索[98]验证二叉搜索树

一、[654]最大二叉树 注意&#xff1a;可以与后序中序建树一起写&#xff0c;思想类似 class Solution {public TreeNode constructMaximumBinaryTree(int[] nums) {return traversal(nums,0, nums.length);}TreeNode traversal(int[] nums,int begin,int end){//左闭右开if(…

2024/06/21--代码随想录算法10-12/17| 子序列问题

300.最长递增子序列 力扣链接 动规五部曲 dp的定义 dp[i]表示子序列答案以nums[i]结尾的最长递增子序列的长度 为什么一定表示 “以nums[i]结尾的最长递增子序” &#xff0c;因为我们在 做 递增比较的时候&#xff0c;如果比较 nums[j] 和 nums[i] 的大小&#xff0c;那么两…

【机器学习 复习】第9章 降维算法——PCA降维

一、概念 1.PCA &#xff08;1&#xff09;主成分分析&#xff08;Principal ComponentAnalysis&#xff0c;PCA&#xff09;一种经典的线性降维分析算法。 &#xff08;2&#xff09;原理&#xff0c;这里以二维转一维为例&#xff0c;原来的平面变成了一条直线 这是三维变二…

Leetcode85

题目描述 给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵&#xff0c;找出只包含 1 的最大矩形&#xff0c;并返回其面积。 解题思路 动态规划的思想&#xff0c;记录每一个位置向上能到达的最大高度&#xff0c;和向左能到达的最大宽度。 在一个点进行遍历时…