当前位置：首页 > news >正文

静态网站可以做留言板站长工具麻豆

news 2026/4/8 5:16:54

静态网站可以做留言板,站长工具麻豆,创办网站需要什么,从零开始做网站seoimages-viewer-vue3：一款Vue3的轻量级图像查看器，它基于Flip动画技术，支持PC和h5移动网页预览照片，如果它是Vue3开发的产品。 npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTabreadme Flip 动画 < …

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>