当前位置: 萬仟网 > IT编程>网页制作>Html5 > vue常用插件之图片预览

vue常用插件之图片预览

2020年01月16日 15:10  | 萬仟网IT编程  | 我要评论

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>

相关配置项

效果图

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com