vue 图片-点击放大预览-好用的插件-v-viewer

ccc_cccc_ccc

于 2020-05-25 15:43:34 发布

阅读量695

点赞数

分类专栏： vue 文章标签： vue html js

本文链接：https://blog.youkuaiyun.com/ccc_cccc_ccc/article/details/106334532

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现图片点击放大预览功能，通过引入v-viewer插件，只需将图片链接放入数组即可轻松实现。详细步骤包括安装依赖、在main.js中配置以及在组件中应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖

cnpm install --save-dev v-viewer

main.js 引用

import Viewer from 'v-viewer' 
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999,
    title: false, //显示标题
    navbar: false,
    toolbar: {
      zoomIn: 1,
      zoomOut: 1,
      reset: 1,
      oneToOne: 1,
      rotateRight: 1,
      rotateLeft: 1,
    }
  }
})

页面组件中使用，images必须是一个数组，数组内直接放入图片链接即可

<viewer :images="images">                
	<img :src="getObjectURL(value)" />
</viewer>

参考：https://zhuanlan.zhihu.com/p/55117558