【Viewer.js】vue3封装图片查看器
效果图

需求
- 点击图片放大
- 可关闭放大的 图片
下载
cnpm in viewerjs
状态管理+方法
stores/imgSeeStore.js
import { defineStore } from 'pinia'
export const imgSeeStore = defineStore('imgSeeStore', {state: () => ({showImgSee: false,ImgUrl: '',}),getters: {},actions: {openImgShow(url) {this.ImgUrl = urlthis.showImgSee = true},resetSeeImg() {this.ImgUrl = ''this.showImgSee = false}}
})
封装的组件
<template><img ref="el" :src="ImgUrl" />
</template><script setup>
import "viewerjs/dist/viewer.css";
import Viewer from "viewerjs";
import { nextTick, onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { globalStateStore } from "src/stores/globalState";const useGlobalStateStore = globalStateStore(),{ ImgUrl } = storeToRefs(useGlobalStateStore),{ resetSeeImg } = useGlobalStateStore;const el = ref();
onMounted(async () => {await nextTick();// 图片查看器关闭事件el.value.addEventListener("hide", () => resetSeeImg());new Viewer(el.value, {navbar: false,title: false,}).show();
});
</script>
使用
TestVue.vue
<template><!-- 这个是要点击查看的图片 --><img style="max-width: 200px" :src="img"@click="openImgShow(img)"/><img-see v-if="showImgSee" />
</template><script setup>
import { ref} from "vue";
import { storeToRefs } from "pinia";
import ImgSee from "src/components/ImgSee.vue";
import { imgSeeStore} from "src/stores/imgSeeStore"; const img = ref('/public/test.jpg')
const useImgSeeStore= imgSeeStore(),{ showImgSee } = storeToRefs(useImgSeeStore),{ openImgShow } = useImgSeeStore;
</script>
相关文章:
【Viewer.js】vue3封装图片查看器
效果图 需求 点击图片放大可关闭放大的 图片 下载 cnpm in viewerjs状态管理方法 stores/imgSeeStore.js import { defineStore } from pinia export const imgSeeStore defineStore(imgSeeStore, {state: () > ({showImgSee: false,ImgUrl: ,}),getters: {},actions: {…...
stm32mp采用spi接口扩展can
在 STM32MP 系列微处理器中,通过 SPI 转 CAN 功能扩展 CAN 接口需要结合硬件设计(如使用 SPI 接口的 CAN 控制器芯片)和 Linux 驱动配置。以下是详细的实现步骤和关键点: 硬件选型与连接 常用 SPI 转 CAN 芯片MCP2515:经典 SPI 转 CAN 控制器,支持 CAN 2.0B。MCP2517FD:…...
forge-1.21.x模组开发(二)给物品添加功能
功能效果 创建一个兑换券,当使用兑换券对着兑换机右键时,获得一条烤鱼 创建兑换券 创建ExchangeCouponsItem.java,继承Item,定义兑换券内容 public class ExchangeCouponsItem extends Item {public ExchangeCouponsItem(Prop…...
创建第一个 Maven 项目(一)
一、引言 在 Java 开发的广袤天地中,Maven 宛如一位全能的管家,发挥着举足轻重的作用。它是一个基于项目对象模型(POM)的项目管理和构建自动化工具,极大地简化了 Java 项目的开发流程。 Maven 的核心优势之一在于其强…...
网络运维学习笔记 022 HCIA-Datacom新增知识点03园区网典型组网架构及案例实战
园区网典型组网架构及案例实战 园区网:内部运行了园区网协议的一个主体网络 园区网络典型架构 园区网络常用协议与技术: 接入层: VLAN、生成树、链路聚合、AAA、dhcp-snooping等 汇聚层:DHCP、堆叠、链路聚合、生成树、OSPF、静…...
python-leetcode-二叉树的直径
543. 二叉树的直径 - 力扣(LeetCode) # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solutio…...
ubuntu中打包与压缩命令详解
Ubuntu 中打包与压缩命令详解 在 Ubuntu 系统中,打包和压缩文件是常见的操作。通过打包和压缩,可以将多个文件或目录合并为一个文件,并减小文件大小以节省存储空间或方便传输。本文将详细介绍 Ubuntu 中常用的打包与压缩命令及其用法。 目录…...
Linux MySQL 8.0.29 忽略表名大小写配置
Linux MySQL 8.0.29 忽略表名大小写配置 问题背景解决方案遇到的问题: 问题背景 突然发现有个大写的表报不存在。 在Windows上,MySQL是默认支持忽略大小写的。 这个时候你要查询一下是不是没有配置: SHOW VARIABLES LIKE lower_case_table…...
【c++】【线程池】线程池模式
【c】【线程池】线程池模式 1 L/F领导者与跟随者模式 概述:在此模式中,线程池中的线程分为:领导者(Leader),跟随者(Follower)和工作者(Processor) 领导者线…...
Next.js 学习-1
Next.js学习 引用:https://www.nextjs.cn/learn/basics/create-nextjs-app 先试试水吧,正好dify用的这个构建的前端项目。 使用 如果您尚未安装 Node.js,请 从此处安装。要求 Node.js 10.13 或更高版本。 好吧得用新的了,记得…...
bat命令在b站下载单个音视频
文章目录 单个音频第一行代码第二行代码下载后效果图 单个视频第一行代码第二行代码第三行代码第四行代码第五行代码下载后效果图 单个音视频第一行代码第二行代码第三行代码第四行代码第五行代码第六行代码下载后的效果图 单个音频 chcp 65001 you-get -o D:\Files\pydownloa…...
函数中的形参和实参(吐槽)
def greet_user(user_name):print(f"Hello,{user_name.title()}!")greet_user("zhangsan") 在以上函数中,user_name是形参, 在greet_user("zhangsan")中,值“zhangsan”是实参。这本身没什么大问题。 但是这…...
运维Ansible面试题及参考答案
目录 简述 Ansible 的工作原理,它是如何实现对远程主机管理的? Ansible 是基于什么语言开发的?这门语言的特性对 Ansible 的功能实现有哪些帮助? 解释 Agentless 在 Ansible 中的含义,与基于 Agent 的自动化工具相比,优势体现在哪? Ansible 中的 Inventory 文件是什…...
3、优先级翻转问题
FreeRTOS优先级翻转是当高优先级任务因等待低优先级任务占用的资源(如互斥锁)被阻塞,而中优先级任务趁机执行,导致高优先级任务无法及时运行的调度异常。 场景示例: 任务优先级:存在三个任务,优…...
python 进程池的基本使用
Python 进程池:Pool任务调度实现 在现代计算机系统重,处理器核心数量的增加为并行计算提供了强大的硬件基础。Python的 multiprocessing 模块中的进程池(Pool)机制,为开发者提供了 一个高效且易用的并行处理框架。 通…...
从零开始学 Rust:基本概念——变量、数据类型、函数、控制流
文章目录 Variables and MutabilityShadowing Data TypesScalar TypesCompound Types FunctionsFunction Parameters CommentsControl FlowRepetition with Loops Variables and Mutability fn main() {let mut x 5;println!("The value of x is: {}", x);x 6;pri…...
记录一次SpringMVC的406错误
原生态的406错误 1. 错误起因2. 解决办法解决方式一 检查是否有导入jackson依赖解决方式二 检查web.xml中是否有配置.html 3. 再次测试 1. 错误起因 最近博主准备重新撸一遍SSM以及SpringBoot的源码,于是用原始的SpringMVC写了一个demo,并且用Tomcat进行…...
Github 2025-02-23 php开源项目日报 Top9
根据Github Trendings的统计,今日(2025-02-23统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量PHP项目9JavaScript项目2Shell项目1TypeScript项目1Blade项目1Java项目1ASP项目1Vue项目1Laravel:表达力和优雅的 Web 应用程序框架 创建周期:…...
一、初始爬虫
1.爬虫的相关概念 1.1 什么是爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人)就是模拟浏览器发送网络请求,接收请求响应,一种按照一定的规则,自动地爬取互联网信息的程序。 原则上,只要是浏览器…...
《A++ 敏捷开发》- 16 评审与结对编程
客户:我们的客户以银行为主,他们很注重质量,所以一直很注重评审。他们对需求评审、代码走查等也很赞同,也能找到缺陷,对提升质量有作用。但他们最困惑的是通过设计评审很难发现缺陷。 我:你听说过敏捷的结对…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)
骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术,它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton):由层级结构的骨头组成,类似于人体骨骼蒙皮 (Mesh Skinning):将模型网格顶点绑定到骨骼上,使骨骼移动…...
