欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue常用插件之图片预览

程序员文章站 2022-07-04 22:26:41
v viewer(1.4.2) 非常实用的图片预览插件,支持旋转、缩放、翻转等操作 一、npm安装 npm i v viewer S 二、全局引入(main.js中) 三、使用 相关配置项 效果图 ......

v-viewer(1.4.2)

非常实用的图片预览插件,支持旋转、缩放、翻转等操作

一、npm安装

npm i v-viewer -s

二、全局引入(main.js中)

import 'viewerjs/dist/viewer.css'
import viewer from 'v-viewer'
vue.use(viewer)
//配置项
viewer.setdefaults({
  zindexinline:9999
})

三、使用

<!--1、以组件的形式-->
<viewer :images="photo">
  <img v-for="(src,index) in photo" :src="src" :key="index"/> 
</viewer>

<!--2、以指令的形式-->
只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。
<div v-viewer>
  <img v-for="(src,index) in photo" :src="src" :key="index"/> 
</div>

相关配置项

vue常用插件之图片预览

效果图

vue常用插件之图片预览