Step 1 Download and configure

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

Step 2 Mount and configure

Vue.use(Viewer);
Viewer.setDefaults({
    'inline':true.'button':true.// Upper right button
    "navbar": true.// Bottom thumbnail
    "title": true.// The current image title
    "toolbar": true.// Bottom toolbar
    "tooltip": true.// Displays the zoom percentage
    "movable": true.// Can be moved
    "zoomable": true.// Whether it can be scaled
    "rotatable": true.// Whether it can be rotated
    "scalable": true.// Can be flipped
    "transition": true.// Excessive CSS3 usage
    "fullscreen": true.// Whether to play in full screen
    "keyboard": true.// Whether keyboard is supported
    "url": "data-source".ready: function (e) {
      console.log(e.type,'Component to initialize');
    },
    show: function (e) {
      console.log(e.type,'Picture display begins');
    },
    shown: function (e) {
      console.log(e.type,'End of picture display');
    },
    hide: function (e) {
      console.log(e.type,'Image Hiding done');
    },
    hidden: function (e) {
      console.log(e.type,'Picture Hiding end');
    },
    view: function (e) {
      console.log(e.type,'View Start');
    },
    viewed: function (e) {
      console.log(e.type,'View end');
      // Rotate the image with index 1 by 20 degrees
      if(e.detail.index === 1) {this.viewer.rotate(20); }},zoom: function (e) {
      console.log(e.type,'Picture zooming starts');
    },
    zoomed: function (e) {
      console.log(e.type,'End of picture zooming'); }}); Url: HTTPS://blog.csdn.net/guozhangqiang/article/details/82251893?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBl ogCommendFromBaidu%7Edefault-8.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommen dFromBaidu%7Edefault-8.controlUse <viewer> </viewer> to wrap the image you want to preview. See the above address for details.Copy the code