vue3.0 瀑布流
时间: 2024-02-10 07:09:14 浏览: 33
Vue 3.0瀑布流(vue-grid-layout)是一个基于Vue的可拖拽的瀑布流布局组件,它提供了一些事件来进行自定义操作,并且可以存储和再展现布局。
以下是一个使用Vue 3.0瀑布流的简单示例:
```vue
<template>
<div>
<vue-grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true">
<div v-for="item in layout" :key="item.i" :data-grid="item">
{{ item.i }}
</div>
</vue-grid-layout>
</div>
</template>
<script>
import VueGridLayout from 'vue-grid-layout';
export default {
components: {
VueGridLayout
},
data() {
return {
layout: [
{ i: 'a', x: 0, y: 0, w: 2, h: 2 },
{ i: 'b', x: 2, y: 0, w: 2, h: 4 },
{ i: 'c', x: 4, y: 0, w: 2, h: 2 }
]
};
}
};
</script>
```
在上面的示例中,我们使用了`vue-grid-layout`组件,并传入了一个`layout`数组作为布局的初始状态。每个布局项都有一个唯一的`i`属性,以及`x`、`y`、`w`和`h`属性来定义其在网格中的位置和大小。
你可以根据需要自定义布局项的样式和内容,并通过拖拽和调整大小来重新排列布局。