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

因为我是只要按钮展示点击的那行的图片，所以这样就可以完美实现我的需求啦~~

记录分享下