/vue3-plock

一个基于vue3的瀑布流组件

Primary LanguageTypeScript

基于Vue3的瀑布流组件

思路来自于react-plock

vue3-plock是一个超小型的瀑布流组件，可以轻松创建响应式的瀑布流的图片布局

特点

  • 好看的瀑布流布局
  • 支持响应式，根据屏幕宽度自动调整row/column
  • 可配置、支持透传
  • 良好的ts提示

Installation

npm install vue3-plock

yarn add vue3-plock

pnpm add vue3-plock

Usage

vue3-plock 导出了一个 waterFall组件，接收一个data数据以及一个config配置

<script setup lang="ts">
import { waterFall } from 'vue3-plock';
import { datasource } from './assets/datasource';
</script>

<template>
  <waterFall
    :data="datasource"
    :config="{
      columns: [1, 2, 3],
      gap: [24, 12, 6],
      media: [640, 1024, 1280]
    }"
    v-slot="slotProps"
  >
    <img :src="slotProps.src" :style="{ width: '100%', height: 'auto' }" />
  </waterFall>
</template>

codesandbox

API Reference

数据源

:data=[]
Parameter Type Description
data string[] Required. 图片的url

配置项

:config={
  columns: [],
  gap: [],
  media: []
}
Parameter Type Description
config object[] Required. 配置
  • media: 配置响应式断点的阈值
  • columns: 设置对应响应区间的列数
  • gap: 设置对应响应区间行列的间距

😀注意：media、columns、gap的数量需要保持一致