💌 作者简介

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

---

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>

4、API 说明

更多v-viewer 插件特性 请移步官网

---

📖 博主致谢

感谢大家阅读到结尾，本次的文章就分享到这里，总结了【vue实现图片放大功能，提高你的开发效率】，希望可以帮到大家，谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇

---

🛩往期精彩：

vue后台管理做适配的最佳方案，你知道吗？

vue时间格式处理(YYYY-MM-DD HH:mm:ss),moment神器你知道吗？

前端实现el-pagination分页的两种业务场景,你知道吗？

vue 重置刷新页面数据（最快捷 简单的方式，全局定义）

vue如何通过url携带token，并且打开新页面