vue瀑布流布局插件vue-masonry

插件网址 https://www.npmjs.com/package/vue-masonrygit ：https://github.com/shershen08/vue-masonry安装 npm install vue-masonry --saveyarn add vue-masonry --savemain.jsimport {VueMasonryPlugin} from 'vue-mason

止语之语

3668人浏览 · 2022-05-11 18:21:19

止语之语 · 2022-05-11 18:21:19 发布

插件npm网址 https://www.npmjs.com/package/vue-masonry
github ：https://github.com/shershen08/vue-masonry
安装 npm install vue-masonry --save || yarn add vue-masonry --save

//main.js
import {VueMasonryPlugin} from 'vue-masonry'
Vue.use(VueMasonryPlugin)

<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>

一些属性
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();