Vue图片预览

一、Vue图片预览功能

安装：

npm install v-viewer --save

main.js配置：

import Viewer from 'v-viewer'//图片预览
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: { 
  'zIndex': 9999,
  'inline': true, //启用lnline模式
  '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' //设置大图片的url
  }
})

页面使用：

<viewer>
  <img :src="text" :key="text"/>
</viewer>