vue3-plock

vue-plock

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 的数量需要保持一致