vue中使用viewerjs组件进行图片展示

Posted 2021-06-01 autofelix

〝 古人学问遗无力，少壮功夫老始成 〞

vue中使用viewerjs组件进行图片展示，常码字不易，出精品更难，没有特别幸运，那么请先特别努力，别因为懒惰而失败，还矫情地将原因归于自己倒霉。你必须特别努力，才能显得毫不费力。如果这篇文章能给你带来一点帮助，希望给飞兔小哥哥一键三连，表示支持，谢谢各位小伙伴们。

目录

一、安装viewerjs

二、引入viewerjs

三、设置功能

 四、单个图片使用该组件

 五、多个图片使用该组件

 六、展示效果

---

一、安装viewerjs

npm install viewerjs --save

二、引入viewerjs

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

三、设置功能

//按需引入
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, '图片缩放结束');
    }
})

 四、单个图片使用该组件

<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>

 五、多个图片使用该组件

<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>

 六、展示效果