解决网站提示有风险,设计之家图片,百度一下1688,网站导航栏目焦点设置images-viewer-vue3#xff1a;一款Vue3的轻量级图像查看器#xff0c;它基于Flip动画技术#xff0c;支持PC和h5移动网页预览照片#xff0c;如果它是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?activeTabreadme
Flip 动画 60fps 技术栈
这款图片预览器是基于vite5vue3Ts5技术栈的基于vite5的库模式打包发布包大小217kb。使用辅助工具库如下
hotkeys-jsvite-plugin-dtsvueuse/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 zhscaleRatio: 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 :keyindex :srcitem v-image-viewer/
img srchttps://picsum.photos/id/10/2500/1667 v-image-viewer/
img v-image-viewer v-lazy-imagehttps://picsum.photos/id/11/2500/1667/
img v-image-viewer v-lazy-imagecurrentSrc/script setup langts
import { ref } from vue
const currentSrc ref(https://picsum.photos/id/13/367/267)
/script组件预览图片
ImagesViewerVue3img srchttps://picsum.photos/id/6/5000/3333/img srchttps://picsum.photos/id/10/2500/1667/img srchttps://picsum.photos/id/11/2500/1667/
/ImagesViewerVue3API 预览图片
img clickpreviewImage srchttps://picsum.photos/id/19/2500/1667/script setup langts
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组件持续维护更新中…
