作用

1.实现桌面拖拽布局功能
2.可调整每个部件的大小
3.可以在不重新构建网格的情况下添加或删除小部件

下载及引入

下载
install with npm // 用npm   
npm install vue-grid-layout --save
​
install with yarn // 用yarn   
yarn add vue-grid-layout

引入
import VueGridLayout from 'vue-grid-layout'; // vue 项目中 
<script src="vue-grid-layout.umd.min.js"></script>  // 普通项目中

版本

node版本 vue-grid-layout版本
8.多 2.3.4以下
14.多 最新版本 2.3.12

案例 以及所有属性

<grid-layout
            //  作用        数据类型          必填        备注
             //===================================================
            // 网格初始化布局  数组       必填  每一项都必须具有i、x、y、w和h属性 属性用作什么 见下方
            :layout.sync="layout"  
            // 表示网格有多少列 数字           非必填    默认为12
            :col-num="12" 
            // 表示一行的高度(以像素为单位) 数字     非必填     默认值为150
            :row-height="30"
            // 表示网格中最大行数 数字          非必填     默认为无穷大
           :maxRows="20"
            // 表示网格项数是否可以拖动 Boolean        非必填     默认为true
            :is-draggable="true"
            // 表示网格是否可以改变带大小 Boolean      非必填     默认为true
            :is-resizable="true"
            // RTL/LTR 的转换 Boolean      非必填 默认为false
            :is-mirrored="false"
            // 容器是否适应内部变化 Boolean  非必填 默认为 true
           :autoSize="ture" 
            // 垂直方向上 是否应该紧凑布局 Boolean 非必填 默认为true
            :vertical-compact="true"
        // 网格之间的边距 两个数字组成的数组 第一个数字为水品距离 第二个为垂直距离 非必填 默认值为 [10,10]
            :margin="[10, 10]"
            // 是否使用css的transforms来排版 非必填 为false时 使用后采用定位方式来布局 默认为true
            :use-css-transforms="true" 
            // 布局是否应响应窗口宽度 非必填 默认false 为true时 会出现一些布局错乱的问题
           :responsive="false" 
           //布局是否应响应为响应布局定义的窗口宽度断点 对象类型 非必填 默认值
            // { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
           :breakpoints=" { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"
           // 定义每个断点的列数
           :cols="{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }"
            // 生命周期
            
           @layout-created="layoutCreatedEvent"  // 布局创建事件
            @layout-before-mount="layoutBeforeMountEvent" // 布局安装以前事件
            @layout-mounted="layoutMountedEvent"    // 布局安装事件
            @layout-ready="layoutReadyEvent"    // 布局准备活动
            @layout-updated="layoutUpdatedEvent" // 格子位置 大小更新 
    >
      // 每个单独控制 需要注意的是 每一个属性都要在data中注册一下 不然会导致不能拖拽 或者 不能放大缩小
       <grid-item
         class="echarts_box" 
          :x="layoutData[0].x" // 横向距离
          :y="layoutData[0].y" // 纵向距离
          :w="layoutData[0].w" // 宽度
          :h="layoutData[0].h" // 高度
          :i="layoutData[0].i" // 唯一值 （重复时设置会导致一块放大或缩小）string类型
          @resize="resizeEvent" // 当该元素 被放大缩小触发的事件 
          @move="moveEvent" // 该元素移动时 触发的事件
          @resized="resizedEvent" // 放大缩小结束 触发事件 注意:必须当大小相对上一次发生改变结束时才会触发
          @moved="movedEvent" // 移动结束触发 注意:只有当位置相对上一次发生改变才会触发 
        ></grid-item>
    // for循环 便利数组中的内容 渲染元素 
       // <grid-item v-for="item in layout"
       //          :x="item.x"
       //           :y="item.y"
       //           :w="item.w"
       //            :h="item.h"
       //          :i="item.i">
       //        {{item.i}}
       //</grid-item>
  </grid-layout>
​
import VueGridLayout from 'vue-grid-layout' //文件引入
const matedata = [
  {
    i: "0", // 索引值 必填 
    h: 4,   // 高度   必填
    w: 7,   // 宽度   必填
    x: 2,   // x 轴距离 必填
    y: 0,   // y轴距离 必填
    minW:5 // 最小宽度 当 w的值小于minW时 采用minW的值 
    minH:3 // 同上
    maxW:8 // 的最大宽度。如果w大于maxW，那么w将被设置为maxW。
    maxH:6 // 同上
    isDraggable:true // 单独控制这一个盒子是否可以拖动 未填写 继承父元素的 非必填
    isResizable:true // 单独控制这一个盒子是否可以调整大小 未填写 继承父元素的 非必填
    static:false // 这个盒子是静态的  不能被其他元素改变位置 会被覆盖在底部
    dragIgnoreFrom: '' // 属性这值为css 选择器 项的哪些元素不应触发项的拖动事件// 具体不知道干嘛的 没有用到
    dragAllowFrom:'' // 属性这值为css 选择器 项的哪些元素应触发项的拖动事件 // 文档这样写的
    resizeIgnoreFrom:''//属性这值为css 选择器 表示项的哪些元素不应触发项的调整大小事件。//来自文档翻译
  },
  {
    h: 1,
    i: "1",
    w: 1,
    x: 0,
    y: 1
  },
  {
    h: 1,
    i: "2",
    w: 1,
    x: 0,
    y: 2
  },
  {
    h: 1,
    i: "3",
    w: 1,
    x: 0,
    y: 3
  }
];
export default {
  data() {
    return {
      layoutData: matedata, //  存放布局数据 数据格式如上
    };
  },
  components: {
    GridLayout, //注册组件
    GridItem // 注册
  },
  methods: {
      // 布局中单元改变事件  i, newX, newY 移动的坐标
      //                i, newH, newW, newHPx, newWPx 变化的大小
                            //newHPx, newWPx 是实际的像素
                        // newH, newW 是数据中的 以每个单位大小为基准点算
    resizeEvent(i, newH, newW, newHPx, newWPx) {
      console.log("大小正在改变",i, newH, newW, newHPx, newWPx);
    },
    moveEvent( i, newX, newY) {
      console.log("正在移动",i, newX, newY);
    },
    resizedEvent(i, newH, newW, newHPx, newWPx) {
      console.log("大小改变完了",i, newH, newW, newHPx, newWPx);
    },
    movedEvent( i, newX, newY) {
      console.log("移动结束了", i, newX, newY);
    },
       // 布局组件的生命周期  参数newLayout=> 布局的数据 每个布局数据
    layoutCreatedEvent(newLayout) {
      console.log("1Created");
    },
    layoutBeforeMountEvent(newLayout) {
      console.log("2Mount");
    },
    layoutMountedEvent(newLayout) {
      console.log("3Mounted");
    },
    layoutReadyEvent(newLayout) {
      console.log("4Ready");
    },
    layoutUpdatedEvent(newLayout) {
      console.log("Updated");
    }
  },
  created() {
  },
  mounted() {
  };
    
};

<grid-layout
                :layout.sync="layoutData"
                :col-num="12"
                :row-height="30"
                :is-draggable="true"
                :is-resizable="true"
                :is-mirrored="false"
                :vertical-compact="true"
                :margin="[15, 15]"
                :use-css-transforms="true"
                @layout-updated="layoutUpdated"
                @layout-ready="layoutReady">
                  <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"
                      dragAllowFrom=".ant-card-head-title"
                      @resized="itemResized(index,$event)">
                      <component class="ant-card-head-title" :is="item.component" @handleData="handleSetLineChartData"></component>
                  </grid-item>
            </grid-layout>

参考链接：https://www.cnblogs.com/whoani/p/11377793.html