elementui el-image组件点击按钮预览图片

2021-12-29 09:35:11 阅读：582 来源： 互联网

今天遇到一个新的需求，点击按钮查看图片，且图片能放大缩小。如下图：

想到了使用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
    },
  }

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

记录分享下

标签：el,预览,elementui,image,点击,按钮,图片
来源： https://www.cnblogs.com/Ming2021/p/15743598.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

elementui el-image组件 点击按钮 预览图片

elementui el-image组件点击按钮预览图片