【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 评审与结对编程
客户:我们的客户以银行为主,他们很注重质量,所以一直很注重评审。他们对需求评审、代码走查等也很赞同,也能找到缺陷,对提升质量有作用。但他们最困惑的是通过设计评审很难发现缺陷。 我:你听说过敏捷的结对…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
Linux链表操作全解析
Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表?1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器
第一章 引言:语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域,文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量,支撑着搜索引擎、推荐系统、…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
