vue实现图片预览功能，提高你的开发效率

在这里插入图片描述

💌 作者简介

📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
📜 CSDN主页：水香木鱼
📑 个人博客：陈春波
🎨 系列专栏：后台管理系统
🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

在这里插入图片描述

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({
  Options: { 
  'inline': true, //启用lnline模式
  '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、使用 `v-viewer`

<!-- v-viewer 关键属性，引用图片放大预览 -->
<div v-viewer>
	<!-- 可循环 或者 img + 静态图片 -->
	<img v-for="(item, index) in imageArr" :src="item" :key="index" />
	<!--<img src="/图片的路径" />-->
</div>