vue好用的图片查看器(v-viewer插件)

 在开发中,经常会遇到这样的需求,就是点击图片,能够放大预览。在网上找到了一款很好用的插件。拿来即用,不需要复杂的配置。特此记录下(这里只是针对于在vue脚手架下的使用方法)。

 1、安装依赖包。

npm install v-viewer --save

 

  2、在main.js中配置如下: 

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})

 

  3、在需要使用图片查看的文件中使用如下:

<viewer :images="images">
    <img v-for="src in images" :src="src" :key="src">
</viewer>

  上面的images是一个数组,用来存放需要预览的图片的路径的。

 

  

posted @   江峰★  阅读(20943)  评论(2编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示