ant design vue 如何实现照片墙？

  • Z时代
  • 2024-02-12
  • 分类：IT

ant design vue 如何实现照片墙？

请求后端之后，后端会返回一个列表

我想实现把图片都显示出来，像上图中一样，一行可以有多个图片

ant design vue 有什么组件可以快速实现这一点

我想到的是，通过 a-row 和 a-col 和 span 实现，但是这样写出来的代码又臭又长，不忍直视

<div v-for="(item, index) in responseData" :key="index">
    <div class="container" v-if="index % 2 === 0">
        <div class="container-item">
            <a-row v-if="index % 2 === 0">
                <a-col :span="6">
                    <img width="250" alt="logo" :src="item.file_url" />
                </a-col>
                <a-col :span="6">
                    <p>母本 hashcode: {{ item.hash_code }}</p>
                    <div>
                        相似度评分:
                        <p style="font-size: 30px; margin-bottom: 0">{{ formattedScore(item.score) }}</p>
                    </div>
                    <p>距离{{ item.distance }}</p>
                </a-col>
                <a-col :span="6" v-if="index < responseData.length - 1">
                    <img width="250" alt="logo" :src="responseData[index + 1].file_url" />
                </a-col>
                <a-col :span="6" v-if="index < responseData.length - 1">
                    <p>母本 hashcode: {{ responseData[index + 1].hash_code }}</p>
                    <div>
                        相似度评分:
                        <p style="font-size: 30px; margin-bottom: 0">{{ formattedScore(responseData[index +
                            1].score) }}
                        </p>
                    </div>
                    <p>距离{{ responseData[index + 1].distance }}</p>
                </a-col>
            </a-row>
        </div>
    </div>
</div>

有什么优雅的实现方案吗？

回答：

又臭又长不是a-row和a-col的错，不使用这两个，可以直接写div，然后css设置flex或grid布局也一样

<a-row>
    <template v-for="(item, index) in responseData" :key="index">
        <a-col :span="6">
            <img width="250" alt="logo" :src="item.file_url" />
        </a-col>
        <a-col :span="6">
            <p>母本 hashcode: {{ item.hash_code }}</p>
            <div>
                相似度评分:
                <p style="font-size: 30px; margin-bottom: 0">{{ formattedScore(item.score) }}</p>
            </div>
            <p>距离{{ item.distance }}</p>
        </a-col>
    </template>
</a-row>

以上是 ant design vue 如何实现照片墙？ 的全部内容， 来源链接： utcz.com/p/934461.html

回到顶部