关于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>