官方文档：https://github.com/shershen08/vue-masonry
VueMasonry (v3 + ts + vite)
-
安装
pnpm install vue-masonry --save -
引入
// main.ts import { VueMasonryPlugin } from 'vue-masonry'; app.use(VueMasonryPlugin);
-
使用
在父元素上添加v-masonrytransition-duration="0.25s"item-selector=".item"(.item 必须和子元素的类名一致)
更多配置请查看官网：properties -
手动刷新 $redrawVueMasonry
方法一：// 获取当前实例，调用 $redrawVueMasonry const that = getCurrentInstance()?.appContext.config.globalProperties; // 调用 that?.$redrawVueMasonry();方法二：
// 使用 provide / inject const $redrawVueMasonry = inject('redrawVueMasonry') as Function; // 调用 $redrawVueMasonry();方法三文章来源：https://www.toymoban.com/news/detail-618818.html
// 往要渲染的数据里添加新的数据， // 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>源码：
文章来源地址https://www.toymoban.com/news/detail-618818.html
到了这里，关于vue3 瀑布流插件 vue-masonry 使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
