安裝
npm install vue-photo-preview --save
main.js引入
```swift
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
?fullscreenEl: false,
}
Vue.use(preview, options)
Vue.use(preview)
options的配置
let options = {
?fullscreenEl: false, //控制是否顯示右上角全屏按鈕
?closeEl: false, //控制是否顯示右上角關(guān)閉按鈕
?tapToClose: true, //點(diǎn)擊滑動(dòng)區(qū)域應(yīng)關(guān)閉圖庫(kù)
?shareEl: false, //控制是否顯示分享按鈕
?zoomEl: false, //控制是否顯示放大縮小按鈕
?counterEl: false, //控制是否顯示左上角圖片數(shù)量按鈕
?tapToToggleControls: true, //點(diǎn)擊應(yīng)切換控件的可見(jiàn)性
?clickToCloseNonZoomable: true, //點(diǎn)擊圖片應(yīng)關(guān)閉圖庫(kù)，僅當(dāng)圖像小于視口的大小時(shí)
?indexIndicatorSep: ' / '//圖片數(shù)量的分隔符
}
更多option配置項(xiàng)，見(jiàn)：https://photoswipe.com/documentation/options.html
使用
<img src="xxx.jpg" large="xxx_2x.jpg" preview="1" preview-text="描述">
同一組預(yù)覽的圖片里面preview值相同為同組圖片。preview-text為預(yù)覽時(shí)下方描述文字。 img的src默認(rèn)為縮略圖，如不填寫(xiě)large，則展示src。若有l(wèi)arge，則顯示large大圖
注意事項(xiàng)
1.如果圖片的動(dòng)態(tài)數(shù)據(jù)需要再獲取數(shù)據(jù)后加上下面這句
this.$previewRefresh();
2.手機(jī)自帶返回鍵的頁(yè)面到了上一頁(yè)，圖片預(yù)覽卻沒(méi)有關(guān)閉，在mounted里面加下面代碼
this.$preview.on('imageLoadComplete',?(e,?item)?=>{
????????????????let?_preview?=?this.$preview.self;
????????????????let?lookUrl?=?window.location.href?+?'&look';
????????????????window.history.pushState(null,?null,?lookUrl);
????????????????_preview.listen('close',
????????????????function()?{
????????????????????if?(window.location.href.indexOf('&look')?!==?-1)?{
????????????????????????window.history.back();
????????????????????}
????????????????});
????????????????window.onhashchange?=?function()?{
????????????????????if?(_preview?!==?null?&&?_preview?!==?undefined)?{
????????????????????????_preview.close();
????????????????????????_preview?=?null;
????????????????????}
????????????????};
????????????});
