vue 圖片查看器(可縮放，翻上下一頁等)使用

NPM

1.安裝

npm install vue-photo-preview --save

2.main.js引入

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

var options = {
    tapToClose: true, //點擊圖片默認關閉
    closeEl:true,    //顯示關閉按鈕
    captionEl: true,    
    fullscreenEl: false,//全屏
    zoomEl: false,    //放大鏡
    shareEl: false,//分享
    counterEl: true,//頁數
    history:true,//打開歷史記錄（點擊返回可回原來頁面）
  }
Vue.use(preview,options)

3.使用

//在img標籤添加preview屬性 preview值相同即表示爲同一組
<img src="xxx.jpg" preview="0" preview-text="描述文字">

//分組
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="1" preview-text="描述文字">

<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">

4.處理異步圖片點擊沒反應

//在得到圖片後執行
this.$previewRefresh();

5.其餘三個差不多的圖片組件

https://www.jianshu.com/p/e3350aa1b0d0