vue3 瀑布流 vue-masonry使用方法

四叶草2010發表於2024-03-14
Vue
npm install vue-masonry --save

main.js檔案中引入

import { VueMasonryPlugin } from "vue-masonry";
app.use(VueMasonryPlugin)

在頁面中使用

<div
        v-masonry
        transition-duration="0.3s"
        item-selector=".item"
        :gutter="10"
>
        <div
          v-masonry-tile
          class="item"
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail(item.id)"
        >
          <!-- 你要渲染的圖片啦，文字一類的程式碼塊 -->
　　　　　　<!--這是vant元件，可以換成自己想要的程式碼-->
          <van-image
            width="100%"
            radius="12"
            show-loading
            show-error
            fit="cover"
            :src="item.imgurl"
          />
        </div>
</div>

<style lang="scss" scoped>
　　.item {
　　　　width: 48%;
　　　　position: relative;
　　　　border-radius: 12px;
　　　　margin-bottom: 18px;
　　　　min-height: 80px;

　　　　.img {
　　　　　　width: 100%;
　　　　　　border-radius: 12px;
　　　　　　display: block;
　　　　}
　　}
</style>

屬性：

  1. transition-duration：過渡的持續時間；
  2. item-selector：Dom專案選擇器；
  3. gutter：專案元素之間的水平間距；

官網地址：https://www.npmjs.com/package/vue-masonry

相關文章