一款强大的前端vue实用图片放大预览插件（推荐收藏）

Posted 2022-02-26 水香木鱼

欢迎来到木鱼推荐集！

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 插件 Github

---

客官，木鱼编辑不易，在记录的同时，成就前端人！
来个收藏吧！