0.0.2 • Published 2 years ago
vue3-plock v0.0.2
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 的数量需要保持一致