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

最新推荐文章于 2024-09-13 21:41:06 发布

ccc_cccc_ccc

最新推荐文章于 2024-09-13 21:41:06 发布

阅读量672

点赞数

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

本文链接：https://blog.csdn.net/ccc_cccc_ccc/article/details/106334532

版权

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

摘要由CSDN通过智能技术生成

安装依赖

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,
    }
  }
}