elementUi 通過 previewSrcList 預覽大圖（兩種方式）

組件 | Element：餓了么組件庫大圖預覽功能 

第一種：（支持IE 使用elementUi官網文檔中的組件）一般項目中需要點擊觸發事件才進行查看大圖，elementUi組件庫中並沒有寫觸發需要執行的代碼，這里在觸發的方法中加this.$refs.preview.clickHandler()觸發查看大圖功能

 

<el-button @click="onPreview">預覽</el-button>
<el-image ref="preview" :src="url" :preview-src-list="srcList"></el-image> export default { data() { return { url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', srcList: [ 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' ], } }, methods: { onPreview() { this.$refs.preview.clickHandler() }, } }　

第二種：（ 不支持IE　使用el-image-viewer組件，是elementUi自帶的但官網文檔中可能因不兼容IE沒有把它暴露出來，不需要下載包引入即可）

<el-button @click="onPreview">預覽</el-button>
<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />
 import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
 export default { components: { ElImageViewer }, data() { return { showViewer: true, url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', srcList: [ 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' ], } }, methods: { onPreview() { this.showViewer = true }, closeViewer() { this.showViewer = false }, } } 

 

 補充：

 

項目需求：點擊查看大圖要有上一頁下一頁，點擊上下頁按鈕時展示每個圖片的詳情信息，這就需要在上下頁按鈕的方法中去寫一些自己的邏輯接口請求代碼，但是在網上找不到有關<el-image>標簽的上下頁按鈕的特有方法。

頁面如下：

　

 

遇到個問題（el-image默認放的圖片可以顯示，當我點擊下一頁時重新給srcList賦值的時候不顯示賦值的圖片）：我這里是先自己實現了上下頁按鈕接口請求不同的詳情信息的這個功能，上面兩種方法的數據項  srcList:[ ]  只放一個值，當我點擊上下頁按鈕的時候再給 srcList 賦值的時候不顯示賦值的圖片，我代碼是這樣的：

this.srcList[0] = url　

然而，點擊下一頁時重新給srcList賦值的時候不顯示賦值的圖片

解決辦法：

在每次執行點擊的方法中 ，每次先給原來的this.srcList置空，再往里push新的url，就解決了

this.srcList = []
this.srcList.push(url)