（v-viewer）vue点击图片预览放大（可旋转、翻转、缩放、上下切换、键盘操作）

1.先安装

npm install v-viewer --save

2.引用导入进来

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

3. vue注册调用

/*vue注册调用，再调用setDefaults方法，根据自己项目需求配置。*/
Vue.use(Viewer);
Viewer.setDefaults({
  'inline':false,
  'button':true, //右上角按钮
  "navbar": false, //底部缩略图
  "title": true, //当前图片标题
  "toolbar": true, //底部工具栏
  "tooltip": true, //显示缩放百分比
  "movable": true, //是否可以移动
  "zoomable": true, //是否可以缩放
  "rotatable": true, //是否可旋转
  "scalable": true, //是否可翻转
  "transition": false, //使用 CSS3 过度
  "fullscreen": false, //播放时是否全屏
  "keyboard": true, //是否支持键盘
  "url": "data-source",
  ready: function (e) {
    console.log(e.type,'组件以初始化');
  },
  show: function (e) {
    console.log(e.type,'图片显示开始');
  },
  shown: function (e) {
    console.log(e.type,'图片显示结束');
  },
  hide: function (e) {
    console.log(e.type,'图片隐藏完成');
  },
  hidden: function (e) {
    console.log(e.type,'图片隐藏结束');
  },
  view: function (e) {
    console.log(e.type,'视图开始');
  },
  viewed: function (e) {
    console.log(e.type,'视图结束');
    // 索引为 1 的图片旋转20度
    if(e.detail.index === 1){
      this.viewer.rotate(20);
    }
  },
  zoom: function (e) {
    console.log(e.type,'图片缩放开始');
  },
  zoomed: function (e) {
    console.log(e.type,'图片缩放结束');
  }
});

4.代码使用

4.1、单张图片

<viewer style="height: 100%;width: 100%">
    <img width="100%" :src="dialogImageUrl"  alt="">
</viewer>

data() {
      return {
          dialogImageUrl: '',
        },
}

4.2、多张图片

<div>
    <viewer :images="images" style="height: 100px;width: 100px">
      <img v-for="item in images" :src="item" :key="item" height="300" alt="">
    </viewer>
</div>

data() {
      return {
        images:[
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg',
          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg',
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3597323878,2962972725&fm=26&gp=0.jpg',
        ]
      }
    },

v-viewer 参数说明