多图预览

相关配置项

属性名	说明	类型	默认值
imgList	多图预览时传入的图片数组	array	-
nowImgIndex	多图预览时当前图片下标	number	0
thumbnail	是否开启底部缩略图	boolean	true
thumbnailsList	缩略图列表	boolean	imgList

imgList

您无需为单图预览和多图预览设置专属的配置项，无论单图还是多图，我们统一使用imgList参数接收图片地址，我们会根据您传入的图片地址数量自动判断

另外我们提供了多种传参方式，方便您在查看单张图片时使用，您可以直接传入单个图片地址、图片地址数组和配置项options，以下的使用方式效果是相同的。

this.$hevueImgPreview('/1.png')

this.$hevueImgPreview(['/1.png'])

this.$hevueImgPreview({
    imgList: ['/1.png']
})

nowImgIndex

在您传入多张图片地址时，我们需要知道您想要从哪一张图片开始预览，您可以通过配置项nowImgIndex告诉我们，需要注意的是它从0开始。

thumbnail

配置项thumbnail控制缩略图是否开启，需要注意的是它仅在多图预览时生效，如果您仅传入一张图片地址，即使配置thumbnail为true，缩略图也不会开启。

另外，在前文我们提到过，开启缩略图会一次性加载所有图片，如果不开启缩略图则不会，而是在每一张图片被切换到的时候加载，请您根据您需要一次性浏览的图片数量以及大小决定是否开启缩略图。

thumbnailsList

当需要预览的图片数量较多或分辨率较高时，一次性加载所有缩略图可能会影响用户体验。如果您已准备好压缩版本的图片，可以通过 thumbnailsList 参数传入，从而加快加载速度并优化体验。若未提供该字段，组件将默认使用 imgList 中的图片作为缩略图。