v-viewer图片组件在vue项目使用方法

v-viewer可随意放大及缩小图片，另外还有旋转、翻转等功能，是一款不错的前端图片显示插件

第一步：安装依赖

npm install v-viewer --save

第二步：在main.js引用并配置

import Viewer from v-viewer
import viewerjs/dist/viewer.css
Vue.use(Viewer);
Viewer.setDefaults({
          
   
  defaultOptions: {
          
   
    zIndex: 9999
  },
  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
  }
});

注：以上是在main.js中全局配置，如果部分页面功能单独配置，可在项目组件下单独配置

第三步：在项目组件中使用

<template>
    <div class="main-body">
        <!--使用方法1：指令方式使用，我比较推荐-->
        <div v-viewer>
            <img v-for="item in ImageList" :src="item" :key="item" width="500" style="cursor:pointer">
        </div>

        <!--使用方法2：viewer标签包裹-->
        <viewer>
            <img v-for="item in ImageList" :src="item" :key="item" width="500" style="cursor:pointer">
        </viewer>

        <!--使用方法3：查找资料看有这种形式，但我测试不可行，也没仔细研究是哪里的问题，感兴趣的自己调下看看-->
        <div id="index">
            <img v-for="item in ImageList" :src="item" :key="item" width="500" style="cursor:pointer">
        </div>

    </div>
</template>

使用完整参考： 使用效果：