vue3 瀑布流插件 vue-masonry 使用

官方文档：https://github.com/shershen08/vue-masonry

VueMasonry (v3 + ts + vite)

1. 安装

   pnpm install vue-masonry --save
   

2. 引入

   // main.ts
   import { VueMasonryPlugin } from 'vue-masonry';
   app.use(VueMasonryPlugin);
   

   

3. 使用
   在父元素上添加 v-masonry transition-duration="0.25s" item-selector=".item"(.item 必须和子元素的类名一致)
   
   更多配置请查看官网：properties

4. 手动刷新 $redrawVueMasonry
   方法一：

   // 获取当前实例，调用 $redrawVueMasonry
   const that = getCurrentInstance()?.appContext.config.globalProperties;
   // 调用
   that?.$redrawVueMasonry();
   

   方法二：

   // 使用 provide / inject
   const $redrawVueMasonry = inject('redrawVueMasonry') as Function;
   // 调用
   $redrawVueMasonry();
   

   方法三

   // 往要渲染的数据里添加新的数据，
   // v-for 循环时 再用v-if过滤一下
   
   // 示例
   imageList.push({ id: 'temp' + Math.random(), ... })
   // html:
   <template>
   <div v-for="item in imageList" :key="item.id">
   	<div v-if="!id.include('temp')">...</div>
   </div>
   </template>
   

   源码：