elementui el-image組件 點擊按鈕 預覽圖片

今天遇到一個新的需求，點擊按鈕查看圖片，且圖片能放大縮小。如下圖：

 

 

 想到了使用element-ui的el-image組件，官網示例：

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

 

<script>
  export default {
    data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }
  }
</script>

但該組件是點擊圖片實現的預覽，那怎么用按鈕觸發呢？

方法：給el-image標簽加上ref屬性

<span v-for="(img, index) in item.imgs" :key="index">
<button @click="previewPic(index)">點擊預覽</button> -->
<el-image 
    style="width: 100px; height: 100px"
    :src="img" 
    :preview-src-list="item.imgs">
    ref="previewImg"
  </el-image>
</span>

methods內：

// 點擊按鈕預覽圖片
    previewPic(index) {
      this.$refs.preview[index].showViewer = true
    }

 

 

 

這個組件用來實現類似上圖的圖片預覽，確實很好用

but。。這樣雖然可以實現預覽，但當頁面有多張圖片的時候，this.$refs.previewImg獲取到的是當前頁面所有的圖片，那么顯示預覽就會有問題

so，針對這種一個頁面多個圖片的問題，想要實現我一開始的需求，可以使用el-image-viewer(圖片查看器)，話不多說，直接上代碼

<button @click="onPreview(img)">預覽</button>
        <el-image-viewer
             v-if="showViewer"
             :on-close="closeViewer"
             :url-list="[url]"
        />

 

<script>
	// 導入組件
  	import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
</script>
export default {
  components: {
    	ElImageViewer
  },
  data() {
  	return {
  		showViewer: false, // 顯示查看器
  		url: ''
  	}
  },
  methods(){
  	// 點擊按鈕預覽圖片
      onPreview(img) {
      this.url = img
      this.showViewer = true
    },
    // 關閉查看器
      closeViewer() {
      this.showViewer = false
    },
  }

因為我是只要按鈕展示點擊的那行的圖片，所以這樣就可以完美實現我的需求啦~~

記錄分享下