Vue：圖片預覽vue-photo-preview的使用

vue-photo-preview

 

應用場景

點擊圖片，能夠以類似朋友圈的方式展示圖片，主要功能：預覽，放大。

 

選擇

經過網上一番查閱，有三款插件比較不錯，分別是 viewerjs、vue-photo-preview 以及 vue-picture-preview。經過簡單比較，viewerjs 功能比較強大，更適合web端。vue-picture-preview 只有預覽和切換上下張功能，無法滿足全部需求。故優先選擇vue-photo-preview。

 

使用

1、安裝

npm install vue-photo-preview --save

2、註冊和配置

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
​
let options = {
  fullscreenEl: false,
}
Vue.use(preview, options)
Vue.use(preview)

3、使用

<img src="xxx.jpg" large="xxx_2x.jpg" preview="1" preview-text="描述">

preview值相同爲同組圖片。preview-text爲預覽時下方描述文字。 img的src默認爲縮略圖，如不填寫large，則展示src。若有large，則顯示large大圖。

 

注意

1、上面爲簡單使用，option其實還有更多可配置項，例如：

let options = {
  fullscreenEl: false, //控制是否顯示右上角全屏按鈕
  closeEl: false, //控制是否顯示右上角關閉按鈕
  tapToClose: true, //點擊滑動區域應關閉圖庫
  shareEl: false, //控制是否顯示分享按鈕
  zoomEl: false, //控制是否顯示放大縮小按鈕
  counterEl: false, //控制是否顯示左上角圖片數量按鈕
  tapToToggleControls: true, //點擊應切換控件的可見性
  clickToCloseNonZoomable: true, //點擊圖片應關閉圖庫，僅當圖像小於視口的大小時
  indexIndicatorSep: ' / '//圖片數量的分隔符
}

更多option配置項，見：https://photoswipe.com/documentation/options.html

2、若img標籤使用的是異步圖片數據，需要在加載數據之後，加一句：

this.$previewRefresh();

這樣刷新之後，vue-photo-preview預覽效果才起效