js常用插件之可拖动、调整大小的Vue栅格布局组件–桌面布局vue-grid-layout
欢迎点击: 个人官网博客
老样子，先上效果图
先下载
npm install vue-grid-layout --save
代码demo
<template>
<div class="board" style="width: 50%">
<div class="home">
<grid-layout
:layout="layoutData"
:col-num="12"
:row-height="layoutConfig.height"
:is-draggable="layoutConfig.dialogVisible"
:is-resizable="layoutConfig.dialogVisible"
:is-mirrored="false"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
// 生命周期
// @layout-created="layoutCreatedEvent" // 布局创建事件
// @layout-before-mount="layoutBeforeMountEvent" // 布局安装以前事件
// @layout-mounted="layoutMountedEvent" // 布局安装事件
// @layout-ready="layoutReadyEvent" // 布局准备活动
// @layout-updated="layoutUpdatedEvent" // 格子位置 大小更新
>
<grid-item
v-for="item in layoutData"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:key="item.i"
@resize="resizeEvent"
@move="moveEvent"
@resized="resizedEvent"
@moved="movedEvent"
:item="watchitem(item)"
>
{
{
item.i }}
</grid-item>
</grid-layout>
</div>
</div>
</template>
<script>
import layoutData from "../layoutData";
import VueGridLayout from "vue-grid-layout";
const GridLayout = VueGridLayout.GridLayout;
const GridItem = VueGridLayout.GridItem;
export default {
data() {
return {
// 布局数据
layoutData: [],
layoutConfig: {
height: 100, // 默认高度
dialogVisible: true, // 是否可拖拽或改变大小
},
};
},
components: {
GridLayout,
GridItem,
},
methods: {
init() {
this.layoutData = layoutData.mainData;
},
moveEvent: function (i, newX, newY, e) {
//console.log(e)
//console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
},
resizeEvent: function (i, newH, newW) {
//console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
},
movedEvent: function (i, newX, newY, e) {
//console.log(e)
console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
},
resizedEvent: function (i, newH, newW, newHPx, newWPx) {
//console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
},
watchitem:function(item) {
// let y_max=5
// let x_max=6
// if(item.y>y_max ||item.x>x_max){
// item.y=1
// item.x=1
// }
return item
}
},
created() {
this.init();
},
};
</script>
<style lang="less">
.vue-grid-item {
background: aquamarine;
}
</style>
layoutData 数据:
{
"mainData": [
{
"x": 0,
"y": 0,
"w": 1,
"h": 1,
"i": "0"
},
{
"x": 0,
"y": 1,
"w": 1,
"h": 1,
"i": "1"
},
{
"x": 0,
"y": 2,
"w": 1,
"h": 1,
"i": "2"
},
{
"x": 0,
"y": 3,
"w": 1,
"h": 1,
"i": "3"
},
{
"x": 1,
"y": 0,
"w": 1,
"h": 1,
"i": "4"
},
{
"x": 1,
"y": 1,
"w": 1,
"h": 1,
"i": "5"
},
{
"x": 1,
"y": 2,
"w": 1,
"h": 1,
"i": "6"
},
{
"x": 1,
"y": 3,
"w": 1,
"h": 1,
"i": "7"
},
{
"x": 2,
"y": 0,
"w": 1,
"h": 1,
"i": "8"
},
{
"x": 2,
"y": 1,
"w": 1,
"h": 1,
"i": "9"
},
{
"x": 2,
"y": 2,
"w": 1,
"h": 1,
"i": "10"
},
{
"x": 2,
"y": 3,
"w": 1,
"h": 1,
"i": "11"
},
{
"x": 3,
"y": 0,
"w": 1,
"h": 1,
"i": "12"
},
{
"x": 3,
"y": 1,
"w": 1,
"h": 1,
"i": "13"
},
{
"x": 3,
"y": 2,
"w": 1,
"h": 1,
"i": "14"
},
{
"x": 3,
"y": 3,
"w": 1,
"h": 1,
"i": "15"
},
{
"x": 4,
"y": 0,
"w": 1,
"h": 1,
"i": "16"
},
{
"x": 4,
"y": 1,
"w": 1,
"h": 1,
"i": "17"
},
{
"x": 4,
"y": 2,
"w": 1,
"h": 1,
"i": "18"
},
{
"x": 4,
"y": 3,
"w": 1,
"h": 1,
"i": "19"
}
]
}