vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统

Vue Grid Layout 是一个Vue.js组件，可以用来创建和修改网格布局。以下是一个使用Vue Grid Layout实现区域拖拽修改大小的基本示例：

首先，确保安装了vue-grid-layout：

npm install vue-grid-layout

然后，在Vue组件中使用它：

<template>
  <div id="app">
    <grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      @move="onMove"
      @resize="onResize"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>
 
<script>
import { GridLayout, GridItem } from 'vue-grid-layout';
 
export default {
  components: {
    GridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '0' },
        // ... more items here
      ]
    };
  },
  methods: {
    onMove(i, newX, newY) {
      const item = this.layout.find(l => l.i === i);
      item.x = newX;
      item.y = newY;
    },
    onResize(i, newH, newW) {
      const item = this.layout.find(l => l.i === i);
      item.h = newH;
      item.w = newW;
    }
  }
};
</script>

在这个例子中，GridLayout是主要的组件，它定义了网格布局的容器。GridItem是网格布局中的每个项目。布局数据存储在layout数组中，其中包含每个项目的位置(x, y)、宽度(w)和高度(h)。is-draggable和is-resizable属性允许拖动和调整项目大小。move和resize事件处理函数onMove和onResize用于更新布局数据。