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>

相关配置项

效果图

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

相关推荐

ps 儿童cdr ai卡通可爱中文字体库宝贝涂鸦海报设计素材包下载mac

字体需要安装才能使用!需要解压后将字体复制到C:\Windows\Fonts安装好后...

总裁主题最新3.8.1破解免授权版 WordPress付费资源素材下载主题

总裁主题最新3.8.1破解免授权版WordPress付费资源素材下载主题【未测试主题...

wordpress ripro主题美化教程 为导航顶部添加一个滚动公告栏

教程开始(可能有点样式兼容问题需要自己调整下)1、找到wp-content/them...

135k代驾小程序V1.2.20+带前端可开源

135k代驾小程序V1.2.20+带前端可开源源码说明1、设定好预付的定金,以及定金...

发表回复

登录... 后才能评论