vue3+TS+vite实现瀑布流列表

安装依赖

npm install vue-waterfall-plugin-next

vue文件中引入使用

<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import { ref } from 'vue'
import { readCategoryTree } from '@/api/ele'
import { useAppStore } from '@/stores/app'

interface ICategoryTree {
  name: string
  displayName: string
  icon: boolean
  count: number
  children: ICategoryTree[]
}

const store = useAppStore()

const breakpoints = {
  9999: { rowPerView: 4 },
  1200: { rowPerView: 3 },
  800: { rowPerView: 2 },
  500: { rowPerView: 1 }
}

const loading = ref<boolean>(false)

const categoryData = ref<ICategoryTree[]>([])

function getCategoryTree() {
  loading.value = true
  readCategoryTree(store.language)
    .then((res) => {
      categoryData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

getCategoryTree()
</script>

<template>
  <div class="bg-gray-200 min-h-60" v-loading="loading">
    <div class="mx-auto max-w-7xl pb-4">
      <Waterfall :list="categoryData" :breakpoints="breakpoints" :gutter="10">
        <template #default="{ item, url, index }">
          <div class="bg-white rounded-lg min-h-48 px-6 py-6">
            <!-- 一级 -->
            <div class="flex flex-row pb-2">
              <RouterLink to="#" class="font-bold flex-grow"> {{ item.displayName }}</RouterLink>
              <img
                class="absolute right-2 top-4 h-16"
                v-if="item.icon"
                :src="'/api/v1/categories/' + item.name + '/icon'"
              />
            </div>
            <div
              v-for="(item1, index1) in item.children"
              :key="index1"
              class="text-sm text-gray-700 mb-1"
            >
              <RouterLink
                :to="{ name: 'parts', params: { name: item1.name, name2: item1.displayName } }"
                class="cursor-pointer"
              >
                {{ item1.displayName }}
              </RouterLink>
              <div v-for="(v, i) in item1.children" class="ps-4" :key="i">
                <RouterLink
                  :to="{ name: 'parts', params: { name: item1.name, name2: item1.displayName } }"
                  class="cursor-pointer"
                >
                  {{ v.displayName }}
                </RouterLink>
              </div>
            </div>
          </div>
        </template>
      </Waterfall>
    </div>
  </div>
</template>