vue3 瀑布流 vue-masonry使用方法

标签：vue VueMasonryPlugin 12px radius vue3 masonry

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

标签：vue,VueMasonryPlugin,12px,radius,vue3,masonry
From： https://www.cnblogs.com/siyecao2010/p/18073946