1.安裝

npm install vue-masonry --save

2.在main.js中配置

import { createApp } from 'vue'

import App from './App.vue'

import { VueMasonryPlugin } from 'vue-masonry';

import mitt from 'mitt'

const emitter = mitt()

let app = createApp(App)

app.config.globalProperties.emitter = emitter

app.use(VueMasonryPlugin)

app.mount('#app')

3.就可以使用啦

?<div v-masonry transition-duration="0.3s" i tem-selector=".item">

? ? ? <div v-masonry-tile class="item" v-for="(item, index) in getList">

? ? ? ? <!-- 你要渲染的圖片啦，文字一類的代碼塊 -->

? ? ? ? <img :src="item.image.small" alt="" />

? ? ? </div>

? ? </div>

總結

以上是生活随笔為你收集整理的vue3中瀑布流插件 vue-masonry 的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。