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>

组件持续维护更新中…