vue2中使用viewerjs插件

背景：实现点击按钮查看图片列表，图片需要可以放大、旋转等。

插件：使用viewerjs插件

解决过程：

1、下载插件

使用npm下载

npm install v-viewer@1.6.4

使用yarn下载

yarn add v-viewer@1.6.4

2、在mainjs文件中引入插件并设置插件配置

import Viewer from "v-viewer";
import "viewerjs/dist/viewer.css";
Vue.use(Viewer);
Viewer.setDefaults({
  Options: {
    inline: true,
    button: true,
    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、使用插件

<template>
  <div>
      <el-button @click="viewPic"
        >查看图片</el-button
      >
  </div>
</template>

<script>                          
export default {
  data() {
    return {
      srcList: [
        {
          src: "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        },
        {
          src: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        },
      ],
    };
  },
  methods: {
    viewPic() {
      this.$viewerApi({
          images: this.srcList,
        })
    },
  },
};
</script>