vite5+vue3+Ts5 开源图片预览器上线

images-viewer-vue3:一款Vue3的轻量级图像查看器,它基于Flip动画技术,支持PC和h5移动网页预览照片,如果它是Vue3开发的产品。
npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTab=readme
在这里插入图片描述

Flip 动画 <= 60fps

在这里插入图片描述

技术栈

这款图片预览器是基于vite5+vue3+Ts5技术栈的,基于vite5的库模式打包,发布包大小217kb。使用辅助工具库如下:

  1. hotkeys-js;
  2. vite-plugin-dts;
  3. @vueuse/core。

已实现功能

  • Rotate image:旋转图片
  • Zoom image:缩放图片
  • Flip image:翻转图片
  • Drag image:拖拽图片
  • Download image:下载图片
  • AutoPlay image:播放图片列表
  • Full screen preview image:全屏预览图片
  • Image information:图像基本信息

用法

安装

npm install images-viewer-vue3
--or
pnpm add images-viewer-vue3
--or
yarn add images-viewer-vue3

配置main.ts|js

import { createApp } from "vue";
import App from "./App.vue";
import ImagesViewerVue3 from 'images-viewer-vue3';
import router from "./router";const app = createApp(App)app.use(ImagesViewerVue3, {zIndex: 999, // Default 999language: 'zh', // Default language 'zh'scaleRatio: 1, // Default 1rotateRatio: 90, // Default 90 degreesisEnableDrag: true, // Enabled by defaultisEnableWheel: true, // Enabled by defaultplaySpeed: 2000, // Default 2000 ms
})
app.use(router)app.mount("#app")

经过上述配置之后就可以放心大胆在vue3项目中使用images-viewer-vue3图片预览器了。

指令预览图片

支持图片懒加载和预览图片指令同时绑定同一个图片元素。

<img v-for="(item, index) in dataList" :key="index" :src="item" v-image-viewer/>
<img src="https://picsum.photos/id/10/2500/1667" v-image-viewer/>
<img v-image-viewer v-lazy-image="'https://picsum.photos/id/11/2500/1667'"/>
<img v-image-viewer v-lazy-image="currentSrc"/><script setup lang="ts">
import { ref } from 'vue'
const currentSrc = ref('https://picsum.photos/id/13/367/267')
</script>

在这里插入图片描述

组件预览图片

<ImagesViewerVue3><img src="https://picsum.photos/id/6/5000/3333"/><img src="https://picsum.photos/id/10/2500/1667"/><img src="https://picsum.photos/id/11/2500/1667"/>
</ImagesViewerVue3>

在这里插入图片描述

API 预览图片

<img @click="previewImage" src="https://picsum.photos/id/19/2500/1667"/><script setup lang="ts">
import { imageViewerApi, onUpdate } from 'images-viewer-vue3'// Monitor current picture information
onUpdate((image:string, index: number) => {console.log(image, index)
})const previewImage = (evt) => {if (!evt.target) returnconst iDom = evt.target as HTMLImageElementimageViewerApi({// Custom Navigation Image Highlighting IndexspecifyIndex: 0,// Current image srccurrent: iDom.src,// Enable flip animationimageDom: iDom,// Preview more pictures// images: ['src','src1', 'src2', ...],})
}
</script>

在这里插入图片描述
组件持续维护更新中…

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

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

相关文章

人工智能驱动的骗局会模仿熟悉的声音

由于人工智能技术的进步&#xff0c;各种现代骗局变得越来越复杂。 这些骗局现在包括人工智能驱动的网络钓鱼技术&#xff0c;即使用人工智能模仿家人或朋友的声音和视频。 诈骗者使用来自社交媒体的内容来制作深度伪造内容&#xff0c;要求提供金钱或个人信息。个人应该通过…

qt QGraphicsScale详解

1、概述 QGraphicsScale是Qt框架中提供的一个类&#xff0c;它提供了一种简单而灵活的方式在QGraphicsView框架中实现缩放变换。通过设置水平和垂直缩放因子、缩放中心点&#xff0c;可以创建各种缩放效果&#xff0c;提升用户界面的交互性和视觉吸引力。结合QPropertyAnimati…

车载VR可视化解决方案

车载VR可视化解决方案是通过融合跟踪用户头部运动的特殊预测算法与惯性测量数据而开发的。该系统将大范围虚拟现实跟踪技术与IMU传感器相结合&#xff0c;为VR和AR应用打造了一套全面的运动跟踪与渲染流程&#xff0c;极大地方便了虚拟现实头显制造商定制可视化流程。 该车载VR…

Cesium 给大量建筑贴上PBR纹理

Cesium 给大量建筑贴上PBR纹理 —— 使用 TilesBuilder 从 SHP 文件转换 在Cesium中使用PBR&#xff08;物理基础渲染&#xff09;纹理给大量建筑物贴图时&#xff0c;TilesBuilder 是一个常用的图形化工具&#xff0c;它可以将原始数据转换成Cesium支持的 3D Tiles 格式。如果…

MySQL 性能优化详解

MySQL 性能优化详解 硬件升级系统配置优化调整buffer_pool数据预热降低日志的磁盘落盘 表结构设计优化SQL语句及索引优化SQL优化实战案例 MySQL性能优化我们可以从以下四个维度考虑&#xff1a;硬件升级、系统配置、表结构设计、SQL语句和索引。 从成本上来说&#xff1a;硬件升…

CSS 快速上手

目录 一. CSS概念 二. CSS语法 1. 基本语法规范 2. CSS的三种引入方式 (1) 行内样式 (2) 内部样式表 (3) 外部样式表 3. CSS选择器 (1) 标签选择器 (2) 类选择器 (3) id选择器 (4) 通配符选择器 (5) 复合选择器 <1> 空格 <2> 没有空格 <3> &q…

00. Nginx-知识网络

知识目录 语雀知识网络&#xff0c;点击“”-- 点击“”查看知识网络 01. Nginx-基础知识 02. Nginx-虚拟主机 03. Nginx-Web模块 04. Nginx-访问控制 05. Nginx-代理服务 06. Nginx-负载均衡 07. Nginx-动静分离 08. Nginx-平滑升级 09. Nginx-日志切割 10. Nginx-…

MATLAB数学建模之画图汇总

MATLAB是一种强大的数学软件&#xff0c;广泛应用于工程计算、控制设计、信号处理等领域。在数学建模中&#xff0c;MATLAB的绘图功能可以帮助我们直观地展示数据和模型结果。 1. 二维数据曲线图 1.1 绘制二维曲线的基本函数 plot函数用于绘制二维平面上的线性坐标曲线图&am…

HarmonyOS 5.0应用开发——UIAbility生命周期

【高心星出品】 文章目录 UIAbility组件创建AbilityUIAbility的生命周期Create状态WindowStageCreate状态Foreground和Background状态WindowStageWillDestroy状态Destroy状态 UIAbility组件 UIAbility组件是一种包含UI的应用组件&#xff0c;主要用于和用户交互。 UIAbility组…

轨道力学:兰伯特问题

轨道力学&#xff1a;兰伯特问题 引言 在轨道力学中&#xff0c;兰伯特问题是指在已知两个位置矢量和它们之间的飞行时间的情况下&#xff0c;求解连接这两个位置的轨道路径问题。该问题以18世纪的数学家约翰海因里希兰伯特&#xff08;Johann Heinrich Lambert&#xff09;命…

word实践:正文/标题/表图等的共用模板样式设置

说在前面 最近使用word新建文件很多&#xff0c;发现要给大毛病&#xff0c;每次新建一个word文件&#xff0c;标题/正文的字体、大小和间距都要重新设置一遍&#xff0c;而且每次设置这些样式都忘记了参数&#xff0c;今天记录一下&#xff0c;以便后续方便查看使用。现在就以…

MicroBlaze软核开发(一):Hello World

实现功能&#xff1a;使用 MicroBlaze软核 串口打印 Hello World Vivado版本&#xff1a;2018.3 目录 MicroBlaze介绍 vivado部分&#xff1a; 一、新建工程 二、配置MicroBlaze 三、添加Uart串口IP 四、生成HDL文件编译 SDK部分&#xff1a; 一、导出硬件启动SDK 二、…

Vue工程化开发中各文件的作用

1.main.js文件 main.js文件的主要作用&#xff1a;导入App.vue&#xff0c;基于App.vue创建结构渲染index.html。

【人工智能】Transformers之Pipeline(二十七):蒙版生成(mask-generation)

​​​​​​​ 目录 一、引言 二、蒙版生成&#xff08;mask-generation&#xff09; 2.1 概述 2.2 facebook/sam-vit-base 2.3 pipeline参数 2.3.1 pipeline对象实例化参数 2.3.2 pipeline对象使用参数 2.3.3 pipeline对象返回参数 2.4 pipeline实战 2.5 模型排…

Lighthouse(灯塔)—— Chrome 浏览器性能测试工具

1.认识 Lighthouse Lighthouse 是 Google 开发的一款开源性能测试工具&#xff0c;用于分析网页或 Web 应用的性能、可访问性、最佳实践、安全性以及 SEO 等关键指标。开发人员可以通过 Lighthouse 快速了解网页的性能瓶颈&#xff0c;并基于优化建议进行改进。 核心功能&…

优化 LabVIEW 系统内存使用

在 LabVIEW 中&#xff0c;内存使用管理是确保高效系统性能的关键因素&#xff0c;尤其是在进行复杂的数据采集、信号处理和控制任务时。LabVIEW 程序的内存消耗可能会随着项目的规模和复杂度增加&#xff0c;导致性能下降&#xff0c;甚至出现内存溢出或程序崩溃。通过合理优化…

git回退到某个版本git checkout和git reset命令的区别

文章目录 1. git checkout <commit>2. git reset --hard <commit>两者的区别总结推荐使用场景* 在使用 Git 回退到某个版本时&#xff0c; git checkout <commit> 和 git reset --hard <commit> 是两种常见的方式&#xff0c;但它们的用途和影响有很…

无人机理论考试合格证书获取

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 轻型民用无人驾驶航空器安全操控理论培训合格证明 前言无人机特性和应用场景 前言 无人机&#xff08;Drone&#xff09;是一种非常受欢迎的技术产品&#xff0c;广泛应用于…

VBA信息获取与处理第四个专题第二节:将工作表数据写入VBA数组

《VBA信息获取与处理》教程(版权10178984)是我推出第六套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。这部教程给大家讲解的内容有&#xff1a;跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互…

单链表---合并两个链表

将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 struct ListNode {int val;struct ListNode* next; }; w 方法一---不使用哨兵位 我们创建一个新链表用于合并两个升序链表&#xff0c; 将两个链表中最小的结点依次尾插到…