首先下载

npm install v-viewer

main.js引入使用

import VueViewer, { directive as viewerDirective } from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(VueViewer)
Vue.directive('viewer', viewerDirective({
  debug: false
}))

在组件中使用,加到html标签上

 v-viewer="{title: false,inline: false,navbar: false}"

有时候可能有 样式问题

  .viewer-container{
    z-index: 3500!important;
  }
  .viewer-toolbar > ul > li::before {
    margin: 2px -8px;
  }
  .viewer-prev, .viewer-play, .viewer-next {
    display: none!important;
  }