元件 | 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
    },
    }
}