Vue插件v-viewer使用

安装

npm install v-viewer
npm i -S viewerjs

引入

引入这里我分成两步了
main.js中引入样式文件

import 'viewerjs/dist/viewer.css';

注册组件方法中引入v-viewer

// 图片预览插件
import Viewer from 'v-viewer';


export function pluginRegister() {
    Vue.use(BootstrapVue)
    Vue.use(IconsPlugin)
    Vue.use(tagCloud)
    Vue.use(Viewer);

    router.beforeEach((to, from, next) => {
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if (isiOS && to.path !== location.pathname) {
            // 此处不可使用location.replace
            location.assign(to.fullPath)
        } else {
            next()
        }
        NProgress.start();
    })
    router.afterEach(route => {
        NProgress.done();
    })
}

这个pluginRegister再main.js中引入然后调用这个方法即可

使用

<viewer v-show="false" :images="viewerList" class="images" ref="viewer">
      <img v-for="src in viewerList" :src="src" :key="src" class="image" />
</viewer>

注册监听事件
window.eventBus.$on(
      "global.image.preview",
      (config: { imgList: string[]; index: number }) => {
        if (config.imgList && config.imgList.length) {
          this.viewerList = config.imgList;
          const viewer: any = this.$refs.viewer;
          viewer.$viewer.show();
          // 为0或者不传时
          if (config.index) {
            setTimeout(() => {
              viewer.$viewer.view(config.index);
            }, 100);
          }
        }
      }
    );

  window.eventBus.$emit("global.image.preview", {
        imgList,
        index: 1,
      });