Element UI的el-image组件内置了ImageViewer用于图片预览，通常情况直接使用el-image的预览功能即可。然而，当预览源不在预览列表中时，将从第一张开始预览。为了解决这个问题，可以利用ImageViewer组件，通过设置initial-index、v-if、on-close和url-list属性来自定义图片预览，从而从指定图片开始预览。
Element UI(2.15.6) 的 el-image 组件有一个图片预览功能
这个功能其实是调用内部组件 ImageViewer 实现的
一般情况直接用 el-image 里的预览足够了
但有一种情况, el-image 不能简单实现
那就是 :src 展示的地址, 不在 :preview-src-list 预览图片列表里( src 是缩略图, preview-src-list 是原图)
这个情况下, preview-src-list 中找不到当前图片地址, 就会从第0张开始预览
不能从指定图片开始预览
这个时候就可以用到内置的 ImageViewer 组件了
demo
ImageViewer 就几个参数
- initial-index: 初始序号, 从第几张开始预览
- v-if: 控制开关
- on-close: 关闭事件
- url-list: 图片地址列表
<template>
<div>
<image-viewer
最低0.47元/天 解锁文章
扫一扫
1172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
