Ecej-V3-Watrefull

基于 Vue 3 + TypeScript + Vite 构建的瀑布流组件

• 自定义插槽类商城结构瀑布流
• 自定义瀑布流展示列数,默认两列
• 自定义瀑布流行列间距,默认 20px
• 自定义瀑布流行列间距单位
• 支持动态 dom 渲染

安装

npm i  ecej-v3-waterfull
//or
yarn add  ecej-v3-waterfull

使用

// main.ts 引入
import waterfull from "ecej-v3-waterfull";
const app = createApp(App);
app.use(waterfull);
app.mount("#app");
//组件中使用,waterFull名称不能修改
 <waterFull v-slot="slotProps" :fullDatas="dataLists" :column="2">
    <!-- content... -->
  </waterFull>

属性

| 属性名 | 类型 | 默认值 | 必填 | 说明 | | :------------ | :----- | :----: | ---: | ---------- | | fullDatas | array | - | 是 | 瀑布流数据 | | column | number | 2 | 否 | 列数 | | columnSpacing | number | 20 | 否 | 列间距 | | rowSpacing | number | 20 | 否 | 行间距 | | unit | string | px | 否 | 间距单位 |

• 间距自定义单位,默认 px 可设置 rem,%
• (用于部分移动端项目使用 rem 忽略 node_modules 文件 px2rem 时)

更新

• 0.3.x 版本后支持动态 dom 瀑布流加载(分页长列表)
• 修复了 0.2.x 版本数据在 tab 切换情况下使用插件 dom 不更新的 bug

插槽

• v-slot="slotProps",插槽提供 item 及 index 两个参数