antdesign图片点击放大_vue图片点击放大功能

因项目需求(ui框架element-ui)，需要实现图片的点击放大，还要能旋转以及上下切换。当时第一反应，element-ui好像没有这样的组件，就想过自己写，但是那个旋转翻页上下切换感觉有点麻烦，不甘心，就在GitHub找找找.........还真找到一个适合vue的插件，叫 https://github.com/fengyuanchen/viewerjs 。

说实话，它的功能还是很多很强大的，大家可以自己去看。主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。

1、首先是安装

npm install v-viewer --save

2、安装完引用(还要记得引用它的css样式)

import Vue from ‘vue‘;

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

3、vue注册调用

Vue.use(Viewer);

Viewer.setDefaults({

Options: {"inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-s