vue實作移動端圖檔預覽

• • 1.安裝插件
  • 2.main引入
  • 3.使用
  • 注意
  • 擴充

通過使用vue-photo-preview插件，實作移動端圖檔的預覽，全屏等功能。

1.安裝插件

npm install vue-photo-preview --save
           

2.main引入

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
           

3.使用

//加上preview="1"即可，preview值相同為同組圖檔
<img src="xxx.jpg"  preview="1" preview-text="圖檔描述">
           

注意

1.如果圖檔是異步擷取，在加載完資料後進行重新整理

this.$nextTick(()=>{
    this.$previewRefresh()
  })
           

2.一個螢幕中有多個圖檔預覽，類似于拍照功能，當有一個沒有圖檔，但是也加了preview=“1” ，會出現另一個也預覽不了的情況。解決方案就是對preview=“1” 進行區分，這樣就不會互相影響

例如：

<img src="1.jpg"  preview="1" preview-text="圖檔描述1">
<img src="2.jpg"  preview="2" preview-text="圖檔描述2">
<img src="3.jpg"  preview="3" preview-text="描述描述3">
           

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

擴充

1.如果想修改插件，option有很多配置項，在main.js就可以配置

let options = {
  fullscreenEl: false, //控制是否顯示右上角全屏按鈕
  closeEl: false, //控制是否顯示右上角關閉按鈕
  tapToClose: true, //點選滑動區域應關閉圖庫
  shareEl: false, //控制是否顯示分享按鈕
  zoomEl: false, //控制是否顯示放大縮小按鈕
  counterEl: false, //控制是否顯示左上角圖檔數量按鈕
  arrowEl: true,  //控制如圖的左右箭頭（pc浏覽器模拟手機時）
  tapToToggleControls: true, //點選應切換控件的可見性
  clickToCloseNonZoomable: true //點選圖檔應關閉圖庫，僅當圖像小于視口的大小時
};
 
import preview from 'vue-photo-preview'
  import 'vue-photo-preview/dist/skin.css'
  import Vue from 'vue'
Vue.use(preview,option)


           

2.圖檔相應事件

mounted () {
    this.init() 
  },
  
methods: {
    int(){
		this.$preview.on('close',())=>{//close隻是衆多事件名的其中一個，更多請檢視文檔
		    console.log('圖檔檢視器被關閉')
		})
		// 添加圖檔檢視器執行個體--this.$preview.self 注意：此執行個體僅在圖檔檢視器被打開時生效
		this.$preview.on('imageLoadComplete',(e,item)=>{
		    console.log(this.$preview.self)  //此時this.$preview.self擁有原插件photoswipe文檔中的所有方法和屬性
		})
	}
}


           

3.縮略圖和高清圖

//如果遇到的需求有縮略圖和高清圖兩種，就需要有兩個位址存放圖檔
//src：存放縮略圖
//large:存放高清圖
<img src="1.jpg" large="GQ1.jpg" preview="1" preview-text="圖檔描述1">