viewer-vue3 图片查看器升级为1.0.31，比之前更强了

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

1.0.35 更新日志

• 修复提示框被图片遮挡问题；
• 优化打包方式；

1.0.31 更新日志

• 版本优化布局，将左侧导航栏和搜索栏设置为可选，让图片展示更舒适；
• 修复旋转图片后，点击重置按钮，样式没有彻底清除问题；
• 升级底部工具栏工具图标；
• 优化全屏预览功能，重复点击全局预览工具图标可以打开和关闭全局预览弹窗；
• 删除多余图片属性，增加图片类型。

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 999
    language: 'zh-cn', // Default language 'zh'
    scaleRatio: 1, // Default 1
    rotateRatio: 90, // Default 90 degrees
    isEnableDrag: true, // Enabled by default
    isEnableWheel: true, // Enabled by default
    playSpeed: 2000, // playSpeed Default 2000 ms
    isDownLoad: true, // Enabled by default
    isHiddenSiderNav: false // Enabled by default
    isHiddenSearch: false, // Disable by default
})
app.se(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>

组件持续维护更新中…