vue使用v-viewer实现图片点击放大预览/旋转/翻转

最近在开发pc端后台管理项目，在页面列表显示图片时，用户点击图片，实现当前图片放大预览，这边采用v-viewer实现此效果

1.npm安装
npm install v-viewer

2.main.js全局引入

import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';

Vue.use(Viewer);

3.页面使用

<template>
  <div>
    <p>{{msg}}</p>
    <img src="../assets/girl.png" v-viewer width="40" height="40" />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "hello"
    };
  }
};
</script>
<style scoped>
</style>

实现效果：
vue使用v-viewer实现图片点击放大预览/旋转/翻转

多张图片：

<template>
  <div>
    <viewer :images="images">
      <img v-for="src in images" :src="src" :key="src" width="40" height="40" />
    </viewer>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      images: [require("../assets/girl.png"), require("../assets/logo.png")]
    };
  }
};
</script>
<style scoped>
</style>

实现效果：
vue使用v-viewer实现图片点击放大预览/旋转/翻转

4.配置参数
vue使用v-viewer实现图片点击放大预览/旋转/翻转

在vue注册调用时，可以根据需求设置defaultOptions属性，实现按需配置v-viewer

import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';

Vue.use(Viewer, {
  defaultOptions: {
    'inline': false,
    'button': true, //右上角按钮
    "navbar": true, //底部缩略图
    "title": false, //当前图片标题
    "toolbar": true, //底部工具栏
    "tooltip": true, //显示缩放百分比
    "movable": true, //是否可以移动
    "zoomable": true, //是否可以缩放
    "rotatable": true, //是否可旋转
    "scalable": false, //是否可翻转
    "transition": true, //使用 CSS3 过度
    "fullscreen": false, //播放时是否全屏
    "keyboard": true, //是否支持键盘
    "url": "data-source",
  }
})

实现效果：
vue使用v-viewer实现图片点击放大预览/旋转/翻转