vue经常使用插件之图片预览

v-viewer(1.4.2)

很是实用的图片预览插件，支持旋转、缩放、翻转等操做

1、npm安装

npm i v-viewer -S

2、全局引入(main.js中)

import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(Viewer)
//配置项
Viewer.setDefaults({
  zIndexInline:9999
})

3、使用

<!--一、以组件的形式-->
<viewer :images="photo">
  <img v-for="(src,index) in photo" :src="src" :key="index"/> 
</viewer>

<!--二、以指令的形式-->
只须要将v-viewer指令添加到任意元素便可，该元素下的全部img元素都会被viewer自动处理。
<div v-viewer>
  <img v-for="(src,index) in photo" :src="src" :key="index"/> 
</div>

相关配置项

效果图