v-viewer 预览图片浅用_v-viewer inited-CSDN博客

本文详细介绍了如何在Vue项目中使用v-viewer组件实现图片预览功能，包括安装依赖、全局引入、配置选项以及在Vue组件中的使用方法，并提供了代码示例。同时，还展示了如何自定义配置，如关闭按钮、导航栏等。

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

1.安装依赖

npm install v-viewer --save

2.全局引入（main.js）

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    inline: true,
    button: false,
    navbar: true,
    title: true,
    toolbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    scalable: true,
    transition: true,
    fullscreen: true,
    keyboard: true,
    url: 'data-source'
  }
})

3.在vue页面中使用

<viewer  @inited="inited" ref="viewer">
        <img :src="src" >
 </viewer>

在data中使用 inited是初始化完成后执行

  methods: {
    inited (viewer) {
      this.$viewer = viewer
      this.$viewer.index = this.activeIndex
// 不要他的按钮
      this.$viewer.options.button = false
// 不要他的底部缩略图
      this.$viewer.options.navbar = false
// 不要他的底部标题
      this.$viewer.options.title = false
// 不要他的底部工具栏
      this.$viewer.options.toolbar = false
      this.show()  //这里注释掉，就不会一进入页面就弹出预览
    },
  // 调用显示
    show () {
      this.$viewer.show()
    },

4.地址
https://www.npmjs.com/package/v-viewer
https://github.com/mirari/v-viewer