Element el-image-viewer根据点击图片次序浏览

你的名字 2023-06-30 15:56 1阅读 0赞

Element框架提供了一个`el-image-viewer`组件实现预览大图的功能，且可以进行图片的切换，其可以很好的代替`Image`组件的`previewSrcList`。

部分源码为：

export default { 
      name: 'elImageViewer',
      props: { 
        urlList: { 
          type: Array,
          default: () => []
        },
        zIndex: { 
          type: Number,
          default: 2000
        },
        onSwitch: { 
          type: Function,
          default: () => { }
        },
        onClose: { 
          type: Function,
          default: () => { }
        }
      },

属性较为简单，主要使用的是 `urlList` 和 `onClose`，前者是图片的列表，后者则是关闭该预览组件。  
由于对图片的大图预览都是从缩略图点击而触发，由于 `urlList` 在初始化后，大图便从数组第一张图进行展示，而普遍的要求是点击第几张图片便从此图开始预览。  
所以在点击缩略图的时候需要对 `urlList` 进行顺序的处理。  
代码如下：

<el-image
      @click="handleImgClick(index)"
      v-for="(item, index) in imgList"
      :src="item"
    />
     
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="viewerImgList"
    />
    ...
    // 点击缩略图的方法 
    handleImgClick(index) { 
    	this.showViewer = true;
    	let tempImgList = [...this.imgList];
    	let temp = [];
    	for (let i = 0; i < index; i++) { 
    		temp.push(tempImgList.shift());
    	}
    	this.viewerImgList = tempImgList.concat(temp);
    }
    ...

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element el-image-viewer根据点击图片次序浏览

Element框架提供了一个`el-image-viewer`组件实现预览大图的功能，且可以进行图片的切换，其可以很好的代替`Image`组件的`previewSrcList`

你的名字/ 2023年06月30日 15:56/ 0 赞/ 2 阅读

相关 Vue根据点击不同的文字改变图片

Vue根据点击不同的文字替换图片 html代码 <!-- 在还没有点击文字的时候，这个时候图片的位置是空的，如果需要我们可以在发起请求后直接先赋值上去 me.i

淩亂°似流年/ 2023年06月30日 08:57/ 0 赞/ 18 阅读

相关图片点击

页面定制css代码 /溢出隐藏设置/ topics, mainContent { overflow: visible; } p

淡淡的烟草味﹌/ 2023年06月03日 02:46/ 0 赞/ 51 阅读

相关 el-image隐藏组件el-image-viewer点击次序预览图片

最近工作项目中有个需求，非要点击“预览”文字进行图片组的大图预览，想着技术栈中刚好有elementui，可以借用el-image的预览功能。但…实在有些许鸡肋，功能的自由感太低

分手后的思念是犯贱/ 2022年12月26日 08:27/ 0 赞/ 295 阅读

相关点击按钮预览图片，可以预览多组图片（vue+element）

elementUI 提供的 Image 组件直接可以点击图片查看图片预览，我的需求也是查看预览图片，但是有很多小的区别！ > 1、点击按钮预览图片； > 2、可以预览多个

た入场券/ 2022年08月30日 15:59/ 0 赞/ 1094 阅读

相关 Android浏览图片，点击查看大图

首先，从图片缩略界面跳转到图片详情页面，应该是从一个Activity跳转到另外一个Activity，应该图片详情页面也有很多操作，用View或者Dialog不是很好。所以现在难

末蓝、/ 2022年07月11日 05:33/ 0 赞/ 559 阅读

相关点击图片，播放视频

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

淡淡的烟草味﹌/ 2022年05月16日 11:18/ 0 赞/ 288 阅读

相关 Android浏览图片，点击放大至全屏效果

最近做一个项目类似于QQ空间，做到照片浏览的功能，对于QQ空间中点击图片放大至全屏，感觉效果很赞，于是也做了个类似的效果。如下。 ![201405102301501

￡神魔★判官ぃ/ 2022年05月13日 03:04/ 0 赞/ 495 阅读

相关点击图片放大功能

点击图片放大功能注意：引入顺序必须先引入jquery.js再引入zoomify.js zoomify图片放大预览插件的github地址为： [https://

怼烎@/ 2022年04月17日 02:45/ 0 赞/ 453 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 456 阅读