当前位置： 移动技术网 > IT编程>网页制作>Html5 > vue常用插件之图片预览

vue常用插件之图片预览

2020年01月16日  | 移动技术网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>

相关配置项

效果图

您可能感兴趣的文章:

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

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网