Vue使用v-viewer实现图片预览和缩放

v-viewer是一个基于viewerjs封装的vue图片预览组件,有预览缩放拉伸旋转切换拖拽等等功能,支持配置化.非常强大,这里记录一下使用过程:

首先v-viewer的中文文档传送门:Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 | Mirari’s Blog

install:

npm i v-viewer -S

import VueViewer, { directive as viewerDirective } from 'v-viewer';
import 'viewerjs/dist/viewer.css'; // 图片预览器的样式
import Vue from 'vue';

Vue.use(VueViewer, {
            defaultOptions: {
                /**
                 *  数字含义:
                 *  0 or false: hide the navbar
                    1 or true: show the navbar
                    2: show the navbar only when the screen width is greater than 768 pixels
                    3: