Use viewerjs component for picture display in vue

"The ancients are powerless in learning, but the young and strong kung fu begins with old age."

The viewerjs component is used in vue to display pictures. Often the code word is not easy, and it is more difficult to produce high-quality goods. If you are not particularly lucky, please work hard first, don't fail because of laziness, and even attribute the cause to your own bad luck. You must work hard to appear effortless. If this article can bring you a little help, I hope to show your support to Little Brother Flying Rabbit with one click and three links. Thank you all friends.
table of Contents
One, install viewerjs
Two, introduce viewerjs
Three, setting function
Four, a single picture uses this component
Five, multiple pictures use this component
Six, display effect

One, install viewerjs

npm install viewerjs --save

Two, introduce viewerjs

//引入import Vue from 'vue';import 'viewerjs/dist/viewer.css';import Viewer from 'v-viewer';

Three, setting function

//按需引入Vue.use(Viewer);Viewer.setDefaults({    'inline': true,    '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",    ready: function (e) {        console.log(e.type, '组件以初始化');    },    show: function (e) {        console.log(e.type, '图片显示开始');    },    shown: function (e) {        console.log(e.type, '图片显示结束');    },    hide: function (e) {        console.log(e.type, '图片隐藏完成');    },    hidden: function (e) {        console.log(e.type, '图片隐藏结束');    },    view: function (e) {        console.log(e.type, '视图开始');    },    viewed: function (e) {        console.log(e.type, '视图结束');        // 索引为 1 的图片旋转20度        if (e.detail.index === 1) {            this.viewer.rotate(20);        }    },    zoom: function (e) {        console.log(e.type, '图片缩放开始');    },    zoomed: function (e) {        console.log(e.type, '图片缩放结束');    }})

Four, a single picture uses this component

<template>  <div>    <viewer>      <img :src="cover" style="cursor: pointer;" height="80px">    </viewer>  </div></template> <script>export default {  data() {    return {      cover: "//www.autofelix.com/images/cover.png"    }  }}</script>

Five, multiple pictures use this component

<template>  <div>    <viewer :images="imgList">      <img v-for="(imgSrc, index) in imgList" :key="index" :src="imgSrc" />    </viewer>  </div></template> <script>export default {  data() {    return {      imgList: [        "//www.autofelix.com/images/pic_1.png",        "//www.autofelix.com/images/pic_2.png",        "//www.autofelix.com/images/pic_3.png",        "//www.autofelix.com/images/pic_4.png",        "//www.autofelix.com/images/pic_5.png"      ]    }  }}</script>

Six, display effect