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"
      }
    ]
  }