@seaart/waterfall-flow

SeaArt Vue 3 瀑布流组件包，包含：

• HyWaterfallFlowContainer
• WaterCard
• SkuCard 全部卡片：CommonCard、PostCard、PostTxtCard、WorkCard、LinkCard、VisuaEffectsCard、BundleCard、BlindBoxCard
• MyCenterSkuCard 全部卡片：CommonCard、PostCard、PostTxtCard、WorkCard、AudioCard、FilmCard、BoardCard、LinkCard、SubscriptionMask
• WaterfallCarouselBar

组件接收原项目相同的 item 数据格式，不会改写接口返回字段。包内的曝光、点赞、收藏和任务参数请求使用 @seaart/request-seaart。

安装

pnpm add @seaart/waterfall-flow

注册

import { createApp } from 'vue';
import WaterfallFlowPlugin from '@seaart/waterfall-flow';
import '@seaart/waterfall-flow/style.css';
import App from './App.vue';

createApp(App)
  .use(WaterfallFlowPlugin, {
    baseURL: 'https://api.example.com',
    token: localStorage.getItem('t') || '',
    locale: 'en',
    isLoggedIn: true,
    router: {
      push: (path) => window.history.pushState({}, '', path),
    },
  })
  .mount('#app');

如果项目已经有请求封装，可以直接传入 request，包会把请求配置原样透传：

import { configureWaterfallFlow } from '@seaart/waterfall-flow';

configureWaterfallFlow({
  request: ({ url, method, data }) => myRequest({ url, method, data }),
});

使用

<template>
  <HyWaterfallFlowContainer
    :data-list="items"
    :cols-list="[
      { width: 220, cols: 2 },
      { width: 600, cols: 3 },
      { width: 1100, cols: 4 }
    ]"
    :has-no-more="noMore"
    @on-load="loadMore"
  >
    <template #main="{ item }">
      <WaterCard :item="item" card-name="SkuCard" @on-event-action="handleAction" />
    </template>
    <template #custom="{ item }">
      <WaterfallCarouselBar :item="item" />
    </template>
  </HyWaterfallFlowContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { HyWaterfallFlowContainer, WaterCard, WaterfallCarouselBar } from '@seaart/waterfall-flow';

const items = ref([]);
const noMore = ref(false);
function loadMore({ requestEnd }) {
  // 保持接口返回的 items / offset / has_more 数据字段不变
  requestEnd();
}
function handleAction(event) {
  console.log(event);
}
</script>

版本

当前版本：0.1.0