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>

相關配置項

效果圖