15.vue项目-图片点击放大预览插件v-viewer

v-viewer图片放大预览插件支持图片数组预览，通过切换查看不同图片，可缩放、移动、旋转图片；demo的源码地址：gitee.com/mayxue/vue2…

图片预览效果：

1.安装依赖：

npm install v-viewer --save

2.在main.js中全局注册和配置

import Vue from 'vue'
// 图片预览组件
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  zIndexInline: 9999, //预览弹窗的层级
  //下面的参数不写，默认都为true
  Options: {
    'inline': true, //启用inline模式
    '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' //设置大图片的url
  }
})

3.在页面中使用：

• 如果通过:images="[]",只能传入Array类型的数据；
• 如果通过:trigger="{}",可以传入任何类型的数据；

<template>
  <div class="imgViewer">
    <el-card :body-style="{ padding: '20px', minHeight: 'calc(100vh - 100px)' }">
      <!-- 使用：:images="[]",只能传入Array类型的数据 -->
      <viewer :images="images">
        <div class="imgList">
          <div class="imgItem" v-for="item in images" :key="item.id">
            <img :src="item" width="300" />
          </div>
        </div>
      </viewer>

      <div style="height:20px"></div>

      <!-- 使用：:trigger="{}",可以传入任何类型的数据 -->
      <viewer :trigger="imagesObj">
        <div class="imgList">
          <div class="imgItem" v-for="item in imagesObj" :key="item.id">
            <img :src="item" width="300" />
          </div>
        </div>
      </viewer>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "imgViewer",
  components: {},
  data() {
    return {
      images: [
        "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg",
        "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
      ],
      imagesObj: {
        1: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg",
        2: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg"
      }
    };
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.imgList {
  display: flex;
  .imgItem {
    margin-right: 20px;
  }
}
</style>