antd 实现通过点击按钮的方式预览一组图片

需求背景

最近公司的PM提了一个优化需求，要求点击一个按钮能弹出预览多张图片的交互效果，演示动画长这样。

于是我打开 antd 官网想搜寻相关的例子，仅发现了通过按钮预览单张图片的示例

<template>
  <div>
    <a-button type="primary" @click="() => setVisible(true)">show image preview</a-button>
    <a-image
      :width="200"
      :style="{ display: 'none' }"
      :preview="{
        visible,
        onVisibleChange: setVisible,
      }"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const visible = ref<boolean>(false);
const setVisible = (value): void => {
  visible.value = value;
};
</script>

那如何实现在不展示 <a-image /> 组件的情况下预览多张图呢？

实现方案

首先，我们知道 antd 的预览多张图是通过 <a-image-preview-group /> 组件实现，通过在 <a-image-preview-group /> 内放置 <a-image /> 组件，当触发 <a-image /> 组件的 onClick 事件能做到 单击左右切换按钮预览多张图像。

那么我们只需要手动触发 <a-image-preview-group /> 内的 <a-image /> 组件的 onClick 事件即可实现多张图片的预览效果。

因为需求是通过点击按钮展示预览效果，那么我们得先在渲染时隐藏所有的 <a-image /> 组件:

<a-image-preview-group>
    <a-image
        v-for="(url, i) in files"
        :key="i"
        :width="0"
        :src="url"
        ref="imageRefs"
        style="display: none"
    />
</a-image-preview-group>

为了能够访问到 <a-image /> 组件实例，需要绑定给组件绑定 ref 来获取实例。

假设页面上现在有一个预览的 button，接下来我们绑定给它绑定一个 onPreviewImages 的 click 事件。

const imageRefs = ref([]);

// 当触发 onPreviewImages 函数执行时，取得第一个 `<a-image />` 组件实例并手动调用 click 事件
// 实现预览效果
const onPreviewImages = () => {
   const aImage = first(imageRefs.value);
   aImage && aImage.$el.nextSibling.click();
}

结尾

至此，我们已经实现了仅通过手动调用事件的方法来实现预览一组图片的效果。🌟

最后我不解的是，既然 antd 提供了对单张图片的手动预览支持，那实现多张图片的手动控制预览也不难，也许这种业务场景比较少见吧。