vue常用插件之图片预览

vue常用插件之图片预览

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>

相关配置项

效果图

分享到 :
相关推荐

为wordpress添加百度收录检测

1、修改functions.php首先我们在主题文件中的找到“functions.p...

【JustMedia V2.9】图片+视频+自媒体资讯类WP网站模板[WordPress主题]

JustMedia主题是一款针对有图片或者视频发布需求的网站量身定制开发的wordp...

【本站自用】自动为新文章添加已使用过的标签

wordpress每次都要手动给文章添加标签,很麻烦?不知文章是否出现以前用过的标签...

RIPRO美化-VIP/免费/商用/付费等资源类型图标

 [wm_notice]角标图片文件有误现补发https://www.ok...

发表评论

登录... 后才能评论