vue 实现瀑布流

插件地址

下载

npm i wc-waterfall

在main.ts引入

// main.ts
import 'wc-waterfall'

在vite.config.ts中配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: { isCustomElement: (tag) => tag.startsWith('wc-') }
      },
    })
  ],
})

在页面标签中使用

<!-- App.vue -->
<template>
  <wc-waterfall :gap="10" :cols="3">
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
  </wc-waterfall>
</template>