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 }, }
因为我是只要按钮展示点击的那行的图片,所以这样就可以完美实现我的需求啦~~
记录分享下