当前位置: 首页 > news >正文

【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模组开发(二)给物品添加功能

功能效果 创建一个兑换券&#xff0c;当使用兑换券对着兑换机右键时&#xff0c;获得一条烤鱼 创建兑换券 创建ExchangeCouponsItem.java&#xff0c;继承Item&#xff0c;定义兑换券内容 public class ExchangeCouponsItem extends Item {public ExchangeCouponsItem(Prop…...

创建第一个 Maven 项目(一)

一、引言 在 Java 开发的广袤天地中&#xff0c;Maven 宛如一位全能的管家&#xff0c;发挥着举足轻重的作用。它是一个基于项目对象模型&#xff08;POM&#xff09;的项目管理和构建自动化工具&#xff0c;极大地简化了 Java 项目的开发流程。 Maven 的核心优势之一在于其强…...

网络运维学习笔记 022 HCIA-Datacom新增知识点03园区网典型组网架构及案例实战

园区网典型组网架构及案例实战 园区网&#xff1a;内部运行了园区网协议的一个主体网络 园区网络典型架构 园区网络常用协议与技术&#xff1a; 接入层&#xff1a; VLAN、生成树、链路聚合、AAA、dhcp-snooping等 汇聚层&#xff1a;DHCP、堆叠、链路聚合、生成树、OSPF、静…...

python-leetcode-二叉树的直径

543. 二叉树的直径 - 力扣&#xff08;LeetCode&#xff09; # 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 系统中&#xff0c;打包和压缩文件是常见的操作。通过打包和压缩&#xff0c;可以将多个文件或目录合并为一个文件&#xff0c;并减小文件大小以节省存储空间或方便传输。本文将详细介绍 Ubuntu 中常用的打包与压缩命令及其用法。 目录…...

Linux MySQL 8.0.29 忽略表名大小写配置

Linux MySQL 8.0.29 忽略表名大小写配置 问题背景解决方案遇到的问题&#xff1a; 问题背景 突然发现有个大写的表报不存在。 在Windows上&#xff0c;MySQL是默认支持忽略大小写的。 这个时候你要查询一下是不是没有配置&#xff1a; SHOW VARIABLES LIKE lower_case_table…...

【c++】【线程池】线程池模式

【c】【线程池】线程池模式 1 L/F领导者与跟随者模式 概述&#xff1a;在此模式中&#xff0c;线程池中的线程分为&#xff1a;领导者&#xff08;Leader&#xff09;&#xff0c;跟随者&#xff08;Follower&#xff09;和工作者&#xff08;Processor&#xff09; 领导者线…...

Next.js 学习-1

Next.js学习 引用&#xff1a;https://www.nextjs.cn/learn/basics/create-nextjs-app 先试试水吧&#xff0c;正好dify用的这个构建的前端项目。 使用 如果您尚未安装 Node.js&#xff0c;请 从此处安装。要求 Node.js 10.13 或更高版本。 好吧得用新的了&#xff0c;记得…...

bat命令在b站下载单个音视频

文章目录 单个音频第一行代码第二行代码下载后效果图 单个视频第一行代码第二行代码第三行代码第四行代码第五行代码下载后效果图 单个音视频第一行代码第二行代码第三行代码第四行代码第五行代码第六行代码下载后的效果图 单个音频 chcp 65001 you-get -o D:\Files\pydownloa…...

函数中的形参和实参(吐槽)

def greet_user(user_name):print(f"Hello,{user_name.title()}!")greet_user("zhangsan") 在以上函数中&#xff0c;user_name是形参&#xff0c; 在greet_user("zhangsan")中&#xff0c;值“zhangsan”是实参。这本身没什么大问题。 但是这…...

运维Ansible面试题及参考答案

目录 简述 Ansible 的工作原理,它是如何实现对远程主机管理的? Ansible 是基于什么语言开发的?这门语言的特性对 Ansible 的功能实现有哪些帮助? 解释 Agentless 在 Ansible 中的含义,与基于 Agent 的自动化工具相比,优势体现在哪? Ansible 中的 Inventory 文件是什…...

3、优先级翻转问题

FreeRTOS优先级翻转是当高优先级任务因等待低优先级任务占用的资源&#xff08;如互斥锁&#xff09;被阻塞&#xff0c;而中优先级任务趁机执行&#xff0c;导致高优先级任务无法及时运行的调度异常。 场景示例&#xff1a; 任务优先级&#xff1a;存在三个任务&#xff0c;优…...

python 进程池的基本使用

Python 进程池&#xff1a;Pool任务调度实现 在现代计算机系统重&#xff0c;处理器核心数量的增加为并行计算提供了强大的硬件基础。Python的 multiprocessing 模块中的进程池&#xff08;Pool&#xff09;机制&#xff0c;为开发者提供了 一个高效且易用的并行处理框架。 通…...

从零开始学 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的源码&#xff0c;于是用原始的SpringMVC写了一个demo&#xff0c;并且用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 什么是爬虫 网络爬虫&#xff08;又被称为网页蜘蛛&#xff0c;网络机器人&#xff09;就是模拟浏览器发送网络请求&#xff0c;接收请求响应&#xff0c;一种按照一定的规则&#xff0c;自动地爬取互联网信息的程序。 原则上&#xff0c;只要是浏览器…...

《A++ 敏捷开发》- 16 评审与结对编程

客户&#xff1a;我们的客户以银行为主&#xff0c;他们很注重质量&#xff0c;所以一直很注重评审。他们对需求评审、代码走查等也很赞同&#xff0c;也能找到缺陷&#xff0c;对提升质量有作用。但他们最困惑的是通过设计评审很难发现缺陷。 我&#xff1a;你听说过敏捷的结对…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...