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

news2025/2/28 2:45:51

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 999
    language: 'zh', // Default language 'zh'
    scaleRatio: 1, // Default 1
    rotateRatio: 90, // Default 90 degrees
    isEnableDrag: true, // Enabled by default
    isEnableWheel: true, // Enabled by default
    playSpeed: 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) return
    const iDom = evt.target as HTMLImageElement
    imageViewerApi({
        // Custom Navigation Image Highlighting Index
        specifyIndex: 0,
        // Current image src
        current: iDom.src,
        // Enable flip animation
        imageDom: iDom,
        // Preview more pictures
        // images: ['src','src1', 'src2', ...],
    })
}
</script>