0.0.2 • Published 2 years ago

vue3-plock v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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=[]
ParameterTypeDescription
datastring[]Required. 图片的 url

配置项

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

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

0.0.2

2 years ago

0.0.1

2 years ago

0.1.0

2 years ago