ZERO-UI

基本使用

Lorem ipsum.

vue


<template>
  <zeroWaterfall>
    <zeroWaterfallItem v-for="(src,index) of list" :key="index">
      <img :src="src" alt="">
      <div class="text">
        <span>Lorem ipsum.</span>
      </div>
    </zeroWaterfallItem>
  </zeroWaterfall>
</template>
<script setup>
  import {reactive} from 'vue';

  const list = reactive([
    'src/imgs/1.webp',
    'src/imgs/2.webp',
    'src/imgs/3.webp',
    'src/imgs/4.webp',
    'src/imgs/5.webp',
    'src/imgs/6.webp',
    'src/imgs/7.webp',
    'src/imgs/8.webp',
    'src/imgs/9.webp',
    'src/imgs/1.webp',
    'src/imgs/2.webp',
    'src/imgs/3.webp',
    'src/imgs/4.webp',
    'src/imgs/5.webp',
    'src/imgs/6.webp',
    'src/imgs/7.webp',
    'src/imgs/8.webp',
    'src/imgs/9.webp',
    'src/imgs/1.webp',
    'src/imgs/2.webp',
    'src/imgs/3.webp',
    'src/imgs/4.webp',
    'src/imgs/5.webp',
    'src/imgs/6.webp',
    'src/imgs/7.webp',
    'src/imgs/8.webp',
    'src/imgs/9.webp',
  ]);
</script>

属性

属性名	说明	可选值	默认值	类型
topGap	元素顶部间距	-	10	Number
gap	元素左右间距(传递了固定列宽时,自动计算,gap失效)	-	10	Number
columnWidth	列宽(没有传自动计算)	-	0	Number
columnsCount	列数(传递列宽,列数自动计算)	-	5	Number

基本使用 ​

属性 ​

基本使用

属性