vue图片点击放大预览

vue图片点击放大预览v-viewer

1. 安装依赖包

  npm i v-viewer --save

2. 全局引入

import Vue from 'vue';
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. 使用

  <viewer :images="photo">
    <!-- photo 一定要一个数组，否则报错 -->
    <img v-for="(src,index) in photo"
      :src="src"
      :key="index"
      :onerror="errorImg">
  </viewer>

4. 介绍

名称	默认值	说明
inline	false	启用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	src	设置大图片的URL