vue3-plock
v0.0.2
Published
## Installation
Downloads
8
Readme
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>
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 的数量需要保持一致**