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>

相关配置项

效果图

请务必线上支付,通过线下支付的出现任何问题平台均不担保!

相关推荐

域名静态展示页,HTML模板

使用方法,新建一个html文件,把下边代码粘贴进去即可。然后批量替换www.Okmg...

wordpress ripro主题专用首页分类导航教程

本教程为各位提供学习使用,链接写死!!!教程和演示站的一样,很简单需要的看好演示站在...

交通投资集团响应式模板

蓝色大气的交通投资建设,交通发展集团公司网站响应式模板html整站下载。包含:关于交...

解决升级WordPress另一更新正在进行的问题

wordpress一个知名的博客cms。嗯 虽然挺好用但是他是国外的。由于网络等原因...

发表评论

登录... 后才能评论