elementUi——点击图片时，预览所有大图——功能实现(两种方案)

2022-09-04 13:48 74阅读 0赞

今天在做后台管理系统时，遇到一个需求，在表格中有个`img`的字段，可能有多张图片，在表格中只展示一张，当点击此图片时，展示所有图片的预览大图效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
遇到这种问题，我的第一反应就是使用走马灯效果：

## 1.走马灯实现预览大图效果 ##

<el-dialog title="证明图片"
               :visible.sync="dialogImgs"
               width="550" :before-close="closeImg">
        <el-carousel height="680px" :autoplay="false">
            <el-carousel-item v-for="(item,index) in imgArr" :key="item" style="text-align:center;">
                <h2 style="text-align:center;">{ { index+1}}-{ { imgArr.length}}</h2>
                <img :src="item" alt="证明图片" style="height:100%;width:100%;" />
            </el-carousel-item>
        </el-carousel>
    </el-dialog>

当点击图片时，展示弹层，弹层中是一个图片效果的走马灯。

用这种方式，其实是有弊端的，因为图片宽高比不定，因此在固定宽度的弹层中，图片想要展示完整，则需要对图片的宽高进行设定，也就可能导致图片比例的失衡。

此时可以用到`css`中的`object-fit: contain;`可以保证图片最长边会显示完整。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

也是有其他的解决办法的，就是利用`dom`元素的`background-image`中的`size`的几个参数来处理，比如`cover`或者`contain`等。

## 2.利用`el-image`来实现 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]  
在`elementUi`中的`image`图片组件中，是存在大图预览的功能的，只需要给`el-image`添加一个`previewSrcList`参数，然后将想要预览的图片数组传入即可。  
图片数组的样式就是一个个图片组成的数组。

这个利用`el-image`的`previewSrcList`是最简单的方式，因此`el-image`提供了 `fit`参数，可以用于设定图片的展示比例问题。  
![··][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220829/723f615db9b1499380424b156cab0729.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220829/34f44b2ebfc9494995c202f4a98cb2c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220829/d00f856da0a64b1789f4bec36fde8208.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220829/426c7068e3fe47058c51612f58011c7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220829/bdc46b4245b6483f99785d747b013221.png