vue 图片预览（鼠标滚动、点击放大、缩小图片）

一、插件v-viewer

1、安装插件

npm install v-viewer -s

2、main.js引入js、css

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

Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})


Viewer.setDefaults({
  Options: { 
    "inline": true, // 是否启动inline模式
    "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
  }
});

3、页面使用

<viewer :images="selectInfoPics" class="viewer" ref="viewer">
  <img v-for="src of selectInfoPics" :src="src" :key="src" width="300">
</viewer>

// selectInfoPics 图片路径组成的数组

二、插件vue2-preview（https://www.npmjs.com/package/vue2-preview）

1、安装插件

npm install vue2-preview -s

2、引入

import VuePreview from 'vue2-preview'

 3、使用

<vue-preview
  :list="list"
  :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
  :previewBoxStyle="{border: '1px solid #eee'}"
  :tapToClose="true"
  @close="closeHandler"
  @destroy="destroyHandler"
/>


// 数据

list: [
 {
   src: 'http://pic37.nipic.com/20140113/8800276_184927469000_2.png',
   w: [2200],
   h: [1900]
 },
 {
   src: 'http://img3.redocn.com/tupian/20150312/haixinghezhenzhubeikeshiliangbeijing_3937174.jpg',
   w: [2200], // 图片放大后的宽
   h: [1900] // 图片放大后的高
 }
]

3、参数说明

三、对比v-viewer工具栏提供了很多很方便的操作，更能满足功能上的需求，vue2-preview展示更顺畅

转载于:https://my.oschina.net/missZhuo/blog/3059299