1. 插件npm网址 https://www.npmjs.com/package/vue-masonry
  2. github :https://github.com/shershen08/vue-masonry
  3. 安装 npm install vue-masonry --save || yarn add vue-masonry --save
  4. //main.js
    import {VueMasonryPlugin} from 'vue-masonry'
    Vue.use(VueMasonryPlugin)
    
  5. <div v-masonry transiton-duration="0.3s" item-selector=".card" gutter="10">
        <div v-masonry-tile class="card" v-for="(item,index) in testData" :key="index" >
    	/*内容*/
    	</div>
    </div>
    
  6. 一些属性
    this.$redrawVueMasonry(); 重加载
    item-selector=".item" 列表DOM项目选择器(类)
    transition-duration="0.3s 过渡效果
    gutter=".gutter-block-selector 项目元素之间的水平间距

vue3

1.重加载

import { defineComponent, ref, nextTick, getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties;
 _this.$redrawVueMasonry();
Logo

前往低代码交流专区

更多推荐