vue 图片放大和缩小的方式

一、使用vue-directive-image-previewer

文档：https://www.npmjs.com/package/vue-directive-image-previewer  

1、安装命令如下：

npm install vue-directive-image-previewer -D

2、引入main.js

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'

import 'vue-directive-image-previewer/dist/assets/style.css'

Vue.use(VueDirectiveImagePreviewer)

 3、在页面中使用

<img v-image-preview src =“url” />

经过以上操作就可以了，但是目前仅支持放大图片，比较可惜。

4、卸载vue-directive-image-previewer

cnpm uninstall vue-directive-image-previewer

二、使用viewerjs

文档：https://github.com/faimaklg/vue-viewerjs

1、安装命令：

npm install v-viewer --save

2、全局引入

import Viewer from 'v-viewer'

import 'viewerjs/dist/viewer.css'

Vue.use(Viewer)

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>

            <img :src="record.PreviewFileUrl"

                 style="80px;height:45px;"

                 alt=""

                 title="点击放大" />

          </viewer>