关于vue.js:vue-viewerjs实现图片预览旋转放大缩小上下切换等功能

缩略图预览放大

1. 装置 npm install v-viewer --save

2. 在 main.js 注册应用

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

// 应用 
Vue.use(Viewer);
Viewer.setDefaults({
    'inline':false,// 是否间接展现
    'button':true, // 右上角按钮
    "navbar": true, // 底部缩略图
    "title": true, // 以后图片题目
    "toolbar": true, // 底部工具栏
    "tooltip": true, // 显示缩放百分比
    "movable": true, // 是否能够挪动
    "zoomable": true, // 是否能够缩放
    "rotatable": true, // 是否可旋转
    "scalable": true, // 是否可翻转
    "transition": true, // 应用 CSS3 适度
    "fullscreen": true, // 播放时是否全屏
    "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,'图片缩放完结');
    }
  });

3. 在须要应用的 vue 页面中

<div class="images clearfix" v-viewer>
   <div  v-for="info in images" :key="info.id">
      <img :src="info.src" :data-source="info.src" alt="">               
   </div>
</div>