tc-waterfall v1.0.0

2.1 安装

npm i tc-waterfall

2.2 注册

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import V3waterfall from 'tc-waterfall'
import 'tc-waterfall/dist/style.css'


createApp(App)
  .use(V3waterfall)
  .mount('#app')

2.3 使用

<tc-waterfall class="waterfall" :list="list" srcKey="cover" :gap="20" :colWidth="200"
              :distanceToScroll="300" :isLoading="loading" :isOver="over" @scrollReachBottom="loadMore">
  <template v-slot:default="slotScope">
    <div class="list-item">
      <a :href="'https://www.baidu.com' + slotScope.id">
        <div class="cover-wrapper">
          <img v-if="slotScope.item.cover" :src="slotScope.item.cover" class="cover" />
        </div>
        <div class="brief">
          <h3>{{ slotScope.item.title }}</h3>
          <p>{{ slotScope.item.outline }}</p>
        </div>
      </a>
    </div>
  </template>
</tc-waterfall>