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。使用辅助工具库如下：
- hotkeys-js；
- vite-plugin-dts；
- @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>
组件持续维护更新中…
