项目需求:
点击某一行内容,展示此内容下的图片,只展示第一张,点击下一张上一张进行切换,页面上显示当前的张数,以及点击图片实现图片预览,粗略效果如下
实现过程
开始使用的<el-image>标签里的属性preview-src-list,基本效果可以实现,但是遇到一些问题:点击页面上的图片显示的当前图片的预览,但是在预览的时候切换下一张,页面上的图片没有变化。未找到合适的解决办法。
后来经查询发现,<el-image-viewer>组件(官网文档中没有,据说不兼容IE),这个组件不需要下载,只需要引入下载即可。
当然,这个过程也不完全顺利,开始依旧不能保持页面上图片和预览切换后的图片保持一致。后来发现有一个on-switch属性,在预览切换的时候触发,可以获取到当前预览图片的位置,写入一些需要的逻辑代码
<el-image
v-if="imgShow"
:src="imageUrl"
ref="previewImg"
@click="showPreview()"
></el-image>
<el-image-viewer
v-if="showViewer"
:on-close="closeViewer"
:url-list="previewList"
:on-switch="previewSwitch"
></el-image-viewer>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default{
components: {
ElImageViewer,
},
methods:{
showPreview() {
this.showViewer = true;
let index = this.index - 1;
this.previewList = this.srcList.slice(index).concat(this.srcList.slice (0, index));
},
closeViewer() {
this.showViewer = false;
},
previewSwitch(val) {
this.imageList.map((item, index) => {
if (item.url == this.previewList[val]) {
this.imageUrl = this.imageList[index].url;
this.index = index + 1;
}
});
},
},
}
还有个问题就是,预览效果不是点击哪张图片展示哪张,而是始终从第一张展示。这时候需要用到
url-list属性,此属性绑定预览图片的数组,如果从中途图片点击预览,同时也需要修改数组顺序。代码如上。
踩坑小结:
每次点击需要把预览图片的数组previewList重置,防止出现点击一个单子出现多个单子下的图片
预览图片切换时不能根据预览的下标去对应页面上显示的图片,因为预览数组的顺序会变,会出现预览和页面展示不是同一张的情况。
不能使用绑定的previewList去调换数组顺序,因为previewList不是固定的,否则会出现多次在一张单子下的不同位置的图片预览,页面图片和预览图片不一致的情况
知识小结:
el-image-viewer使用要引用;
组件中属性:
on-close:关闭时触发
on-switch:切换时触发
url-list:默认展示的图片数组
有些啰嗦,可能还有些不专业,只是当下的一点点记录,有错误会继续更正