使用Vue-Grid-Layout实现自定义工作台

<template>
  <div class="workbench-container">
    <vue-grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true">
      <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">
        <!-- 组件内容 -->
        <component :is="item.component"></component>
      </grid-item>
    </vue-grid-layout>
  </div>
</template>
 
<script>
import { VueGridLayout, GridItem } from 'vue-grid-layout';
 
export default {
  components: {
    VueGridLayout,
    GridItem
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '0', component: 'ComponentA' },
        { x: 2, y: 0, w: 2, h: 2, i: '1', component: 'ComponentB' },
        // ...更多组件
      ]
    };
  }
};
</script>
 
<style scoped>
.workbench-container {
  height: 100%;
  position: relative;
}
</style>

这个例子展示了如何在Vue应用中使用vue-grid-layout创建一个简单的工作台界面。layout数组定义了每个组件的位置、大小和对应的Vue组件。用户可以拖拽和调整大小，创建自己的工作台布局。