v-viewer图片预览插件使用

链接：https://www.jianshu.com/p/1fd3b4e6911c

今天介绍一款用于图片浏览的Vue组件，支持旋转、缩放、翻转等操作，它是基于viewer.js做的二次开发，我感觉用起来挺方便的，Github地址：https://github.com/mirari/v-viewer

 

预览效果

一、安装

npm install v-viewer --save

二、使用

1.指令方式使用

只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer自动处理。你可以像这样传入配置项： v-viewer="{inline: true}"如果有必要，可以先用选择器查找到目标元素，然后可以用el.$viewer来获取viewer实例。

<template>
  <div id="app">
    <div class="images" v-viewer="{movable: false}">
      <img v-for="src in images" :src="src" :key="src">
    </div>
    <button type="button" @click="show">Show</button>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)
  export default {
    data() {
      //用于预览的图片数组
      images: ['1.jpg', '2.jpg']
    },
    methods: {
      show () {
        //获取viewer实例
        const viewer = this.$el.querySelector('.images').$viewer
        //调用show方法进行显示预览图
        viewer.show()
      }
    }
  }
</script>

2.组件方式使用

<template>
  <div id="app">
    <viewer :options="options" :images="images"
            @inited="inited"
            class="viewer" ref="viewer"
    >
      <template scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
        {{scope.options}}
      </template>
    </viewer>
    <button type="button" @click="show">Show</button>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from "v-viewer/src/component.vue"
  export default {
    components: {
      Viewer
    },
    data() {
      images: ['1.jpg', '2.jpg']
    },
    methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      show () {
        //调用$viewer的show方法，默认显示第一张图片
        this.$viewer.show()
        //如果需要指定显示某一张图片使用view方法，index是指定的那张图片所在数组的位置索引
        //this.$viewer.view(index)
      }
    }
  }
</script>

三、Options配置项说明

'inline': true, // 是否启用inline模式

'button': true, // 是否显示右上角关闭按钮

'navbar': true, // 是否显示缩略图底部导航栏

'title': true, // 是否显示当前图片标题，默认显示alt属性内容和尺寸

'toolbar': true, // 是否显示工具栏

'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true

'fullscreen': true, // 播放时是否全屏，默认true

'loading': true, // 加载图片时是否显示loading图标，默认true

'loop': true, // 是否可以循环查看图片，默认true

'movable': true, // 是否可以拖得图片，默认true

'zoomable': true, // 是否可以缩放图片，默认true

'rotatable': true, // 是否可以旋转图片，默认true

'scalable': true, // 是否可以翻转图片，默认true

'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true

'transition': true, // 使用 CSS3 过度，默认true

'keyboard': true, // 是否支持键盘，默认true

'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1

'minZoomRatio': 0.01, // 最小缩放比例，默认0.01

'maxZoomRatio': 100, // 最大缩放比例，默认100

'url': 'data-source' // 设置大图片的 url

四、备注

1.中文文档
2.在线调试参数查看效果
3.代码示例