<template>

<header>

<strong>Vue瀑布流</strong>

<small>

<span class="badge text-bg-success">v{{ pkg.version }}</span>

</small>

</header>

<VirtualWaterfall

:virtual="waterfallOption.virtual"

:gap="waterfallOption.gap"

:padding="waterfallOption.padding"

:preload-screen-count="[waterfallOption.topPreloadScreenCount, waterfallOption.bottomPreloadScreenCount]"

:item-min-width="waterfallOption.itemMinWidth"

:max-column-count="waterfallOption.maxColumnCount"

:min-column-count="waterfallOption.minColumnCount"

:calc-item-height="calcItemHeight"

:items="data.list"

>

<template #default="{ item }: { item: ItemOption }">

<Card

:item="item"

:onlyImage="waterfallOption.onlyImage"

>

</Card>

</template>

</VirtualWaterfall>

<aside v-if="asideShow">

<form>

<div class="form-group form-group-sm mb-2">

<label class="form-label fs-6">间隔 <code>[0:100]</code></label>

<div class="input-group input-group-sm">

<input

type="number"

class="form-control"

v-model="waterfallOption.gap"

min="0"

max="100"

step="1"

/>

<span

class="input-group-text"

id="basic-addon1"

>

px

</span>

</div>

</div>

<div class="form-group form-group-sm mb-2">

<label class="form-label fs-6">填充 <code>[0:100]</code></label>

<div class="input-group input-group-sm">

<input

type="number"

class="form-control"

v-model="waterfallOption.padding"

min="0"

max="100"

step="1"

/>

<span

class="input-group-text"

id="basic-addon1"

>

px

</span>

</div>

</div>

<div class="form-group form-group-sm mb-2">

<label class="form-label fs-6">每个元素的最小宽度 <code>[100:600]</code></label>

<div class="input-group input-group-sm">

<input

type="number"

class="form-control"

v-model="waterfallOption.itemMinWidth"

min="100"

max="600"

step="1"

/>

<span

class="input-group-text"

id="basic-addon1"

>px</span

>

</div>

</div>

<div class="form-group form-group-sm mb-2">

<label class="form-label fs-6">距离底部多少加载更多 <code>[0:10000]</code></label>

<div class="input-group input-group-sm">

<input

type="number"

class="form-control"

v-model="waterfallOption.bottomDistance"

min="0"

max="1000"

step="1"

/>

<span

class="input-group-text"

id="basic-addon1"

>px</span

>

</div>

</div>

<div class="form-group form-group-sm mb-2">

<label class="form-label fs-6"

>最小列数 <code>[0:{{ waterfallOption.maxColumnCount }}]</code>，最大列数 <code>[{{ waterfallOption.minColumnCount }}:10]</code></label

>

<div class="input-group input-group-sm">

<input

type="number"

class="form-control"

v-model="waterfallOption.minColumnCount"

min="0"

:max="waterfallOption.maxColumnCount"

step="1"

/>

<span

class="input-group-text"

id="basic-addon1"

>列</span

>

<input

type="number"

class="form-control"

v-model="waterfallOption.maxColumnCount"

:min="waterfallOption.minColumnCount"

max="10"

step="1"

/>

<span

class="input-group-text"

id="basic-addon1"

>列</span

>

</div>

</div>

<div class="form-group form-group-sm mb-2">

<label class="form-label fs-6">(顶部/底部)预加载屏 <code>[0:5]</code></label>

<div class="input-group input-group-sm">

<input

type="number"

class="form-control"

v-model="waterfallOption.topPreloadScreenCount"

min="0"

max="5"

step="1"

/>

<input

type="number"

class="form-control"

v-model="waterfallOption.bottomPreloadScreenCount"

min="0"

max="5"

step="1"

/>

</div>

</div>

<div class="form-group form-group-sm form-check form-switch mb-1">

<label class="form-label fs-6">开启虚拟列表</label>

<input

class="form-check-input"

type="checkbox"

v-model="waterfallOption.virtual"

/>

</div>

<div class="form-group form-group-sm form-check form-switch mb-2">

<label class="form-label fs-6">仅展示图片</label>

<input

class="form-check-input"

type="checkbox"

v-model="waterfallOption.onlyImage"

/>

</div>

<div class="form-group form-group-sm mb-2">

<label class="form-label fs-6">数据展示</label>

<p>每页条数: {{ data.size }}</p>

<p>当前页码: {{ data.page }} / {{ data.max }}</p>

<p>已加载量: {{ data.list.length }} / {{ data.total }}</p>

<p>等待加载: {{ waterfallOption.loading }}</p>

</div>

<button

type="button"

class="btn btn-primary btn-sm"

@click="backTop"

>

回到顶部

</button>

</form>

</aside>

</template>