Vue图片预览插件v-viewerVue图片浏览组件v-viewer中文参考文档 0. 基于viewerjs 在vue中

0. 基于viewerjs

v-viewer是基于viewerjs的

<template>
  <div id="index">
    <ul>
      <li v-for="(item, index) of imgArr" :key="index">
        <img :src="item" alt="图片描述" />
      </li>
    </ul>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default {
  name: 'HelloWorld',
  data() {
    return {
      imgArr: [
        'https://picsum.photos/200/200',
        'https://picsum.photos/300/200',
        'https://picsum.photos/250/200'
      ]
    }
  },
  mounted() {
    const ViewerDom = document.getElementById('index')
    const viewer = new Viewer(ViewerDom, {
      // 相关配置项
    })
    console.log(viewer)
  }
}
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
ul {
  display: flex;
  flex-wrap: wrap;
}
ul li {
  width: 265px;
  height: 180px;
  list-style: none;
  border: 2px solid #ccc;
  border-radius: 3px;
  padding: 1px;
  margin: 10px;
  cursor: pointer;
}
ul li img {
  width: 100%;
  height: 100%;
}
</style>

1. v-viewer 安装和使用

1.1 安装和引入

npm install v-viewer@1.6.4

import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)

1.2 三种使用方式：指令、组件、api

指令形式: 只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer自动处理。
组件形式: 引入组件<viewer>。使用作用域插槽来定制你的图片展示方式
api形式: 直接执行函数: this.$viewerApi({options: {}, images: []}) 来展现

<template>
  <div>
    <!-- directive -->
    <div class="images" v-viewer>
      <img v-for="src in images" :key="src" :src="src" />
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :key="src" :src="src" />
    </viewer>
    <!-- api -->
    <button type="button" @click="show">Click to show</button>
  </div>
</template>
<script>
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import Vue from 'vue'
Vue.use(VueViewer)
export default {
  data() {
    return {
      images: [
        'https://picsum.photos/200/200',
        'https://picsum.photos/300/200',
        'https://picsum.photos/250/200'
      ]
    }
  },
  methods: {
    show() {
      this.$viewerApi({
        images: this.images
      })
    }
  }
}
</script>

2.Viewer的配置项 & 方法

参考viewer.js

// 默认配置
defaultOptions: {
    zIndex: 3000,
    inline: false, // 启用内联模式
    button: true, // 在查看器右上角显示按钮
    navbar: true, // 指定导航栏的可见性
    title: false, // 指定标题的可见性和内容
    toolbar: false, // 指定工具栏及其按钮的可见性和布局
    tooltip: true, // 放大或缩小时显示带有图像比率（百分比）的工具提示
    movable: true, // 启用以移动图像
    zoomable: true, // 启用以缩放图像
    rotatable: false, // 启用以旋转图像
    scalable: true, // 启用以缩放图像。
    transition: true, // 为某些特殊元素启用CSS3转换
    fullscreen: false, // 启用以在播放时请求全屏
    keyboard: true, // 启用键盘支持。
    url: 'src', // 定义获取原始图像URL以供查看的位置
}

3. 在实际项目中使用

3.1 在main.js中全局注册

// 在main.js中全局注册
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    inline: true,
    button: true,
    navbar: true,
    title: true,
    toolbar: true,
    tooltip: true,
    movable: true,
    zoomable: true,
    rotatable: true,
    // "scalable": true,
    transition: true,
    fullscreen: true,
    keyboard: true,
    url: 'data-source'
  }
})

3.2 单独封装一个图片预览组件

<template>
  <viewer :images="imgList" class="descimgBox">
    <img
      v-for="(decImg, index) in imgList"
      :key="index"
      :src="decImg"
      :style="{ 'object-fit': imgStyle, 'border-radius': borderRadius }"
    />
  </viewer>
</template>
<script>
export default {
  name: 'VViewer',
  props: {
    options: {
      // 图片列表
      type: Array,
      required: true
    },
    imgStyle: {
      // 值有fill， contain， cover， scale-down,默认为contain
      type: String,
      default() {
        return 'contain'
      }
    },
    borderRadius: {
      // 图片的圆角效果
      type: String,
      default: '0px'
    }
  },
  data() {
    return {
      imgList: []
    }
  },
  created() {
    this.imgList = this.options //图片列表
  },
  methods: {}
}
</script>
<style scoped>
.descimgBox {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: baseline;
  /* align-items: flex-start; */
}
.descimgBox img {
  width: 90%;
  height: 80%;
  margin: 5px 1%;
  cursor: zoom-in;
}
</style>

3.3 使用图片预览组件

<template>
  <VViewer
    :options="imgPath ? [baseUrl + imgPath] : imgList"
    :imgStyle="'cover'"
    :border-radius="'8px'"
    :style="
      imgPath ? 'width: 140px; height: 70px' : 'width: 420px; height: 70px'
    "
  ></VViewer>
</template>

<script>
import VViewer from '@/components/vviewer'
export default {
  name: 'ImgViewer',
  components: { VViewer },
  data() {
    return {
      baseUrl: 'https://picsum.photos/',
      imgPath: '',
      imgList: [
        'https://picsum.photos/200/200',
        'https://picsum.photos/300/200',
        'https://picsum.photos/250/200'
      ]
    }
  }
}
</script>