vue-grid-layout是一个vue的可拖拽的瀑布流布局组件,并提供相应的事件进行自定义操作。而且布局可以存储和再展现。
安装:
npm install --save vue-grid-layoutcnpm
特点:
元素可拖动
元素可调整大小
边界检查拖动和调整大小
可以添加或删除窗口小部件而无需重建网格
布局可以序列化和恢复
自动RTL支持(调整大小不适用于2.2.0上的RTL)
github地址:https://github.com/jbaysolutions/vue-grid-layout
template
<div class="vueGridLayout">
<div class="board" style="width: 100%">
<div class="home">
<grid-layout
:layout="layoutData"
:col-num="2"
:row-height="layoutHeight"
:is-draggable="dialogVisible"
:is-resizable="dialogVisible"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item
v-for="(item,index) in layoutData"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
>
<img class="img_cl" :src="item.imgSrc" />
{{index}}
</grid-item>
</grid-layout>
</div>
</div>
</div>
script
import { GridLayout, GridItem } from "vue-grid-layout";
import layoutData from "@/assets/data/layoutData.json";
export default {
name: "vueGridLayout",
data() {
return {
layout: [
{ x: 0, y: 0, w: 4, h: 2, i: 0 } //数据格式
],
// 布局数据
layoutData: [],
layoutHeight: 130,
layoutConfig: {
height: 330, // 默认高度
dialogVisible: false // 是否可拖拽或改变大小
},
};
},
components: {
GridLayout,
GridItem
},
methods: {
init() {
let mainData = [];
if (layoutData.mainData.length > 0) {
layoutData.mainData.forEach(element => {
if (element.imgSrc != "") {
element.imgSrc = require("../assets/image/"+element.imgSrc);
mainData.push(element)
}
});
}
this.layoutData = mainData;
}
},
created() {
this.init();
}
};
css
.vue-grid-item {
background: #eeeef1;
}
.img_cl {
width: 100%;
height: 100px;
}
layoutData.json
```javascript
{
"mainData": [
{
"x": 0,
"y": 0,
"w": 1,
"h": 1,
"i": "0",
"imgSrc":"1.jpg",
},
{
"x": 0,
"y": 1,
"w": 1,
"h": 1,
"i": "1",
"imgSrc":"2.jpg"
},
{
"x": 0,
"y": 2,
"w": 1,
"h": 1,
"i": "2",
"imgSrc":"3.jpg"
},
{
"x": 0,
"y": 3,
"w": 1,
"h": 1,
"i": "3",
"imgSrc":"6.jpg"
},
{
"x": 1,
"y": 0,
"w": 1,
"h": 1,
"i": "4",
"imgSrc":"5.jpg"
},
{
"x": 1,
"y": 1,
"w": 1,
"h": 1,
"i": "5",
"imgSrc":"6.jpg"
},
{
"x": 1,
"y": 2,
"w": 1,
"h": 1,
"i": "6",
"imgSrc":"2021895.jpg"
},
{
"x": 1,
"y": 3,
"w": 1,
"h": 1,
"i": "7",
"imgSrc":"2021895.jpg"
},
{
"x": 2,
"y": 0,
"w": 1,
"h": 1,
"i": "8",
"imgSrc":"6.jpg"
},
{
"x": 2,
"y": 1,
"w": 1,
"h": 1,
"i": "9",
"imgSrc":"1.jpg"
},
{
"x": 2,
"y": 2,
"w": 1,
"h": 1,
"i": "10",
"imgSrc":"2.jpg"
},
{
"x": 2,
"y": 3,
"w": 1,
"h": 1,
"i": "11",
"imgSrc":"3.jpg"
},
{
"x": 3,
"y": 0,
"w": 1,
"h": 1,
"i": "12",
"imgSrc":"5.jpg"
},
{
"x": 3,
"y": 1,
"w": 1,
"h": 1,
"i": "13",
"imgSrc":"5.jpg"
},
{
"x": 3,
"y": 2,
"w": 1,
"h": 1,
"i": "14",
"imgSrc":"2023491.jpg"
},
{
"x": 3,
"y": 3,
"w": 1,
"h": 1,
"i": "15",
"imgSrc":"2023491.jpg"
},
{
"x": 4,
"y": 0,
"w": 1,
"h": 1,
"i": "16",
"imgSrc":"2023491.jpg"
},
{
"x": 4,
"y": 1,
"w": 1,
"h": 1,
"i": "17",
"imgSrc":"1.jpg"
},
{
"x": 4,
"y": 2,
"w": 1,
"h": 1,
"i": "18",
"imgSrc":"4.jpg"
},
{
"x": 4,
"y": 3,
"w": 1,
"h": 1,
"i": "19",
"imgSrc":"4.jpg"
}
]
}
运行后效果: