基于vue3和vue-grid-layout实现自定义布局和动态渲染组件

<template>
  <div class="layout-container">
    <grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :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" />
      </grid-item>
    </grid-layout>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import { GridLayout, GridItem } from 'vue-grid-layout';
 
export default {
  components: {
    GridLayout,
    GridItem
  },
  setup() {
    const layout = ref([
      { x: 0, y: 0, w: 2, h: 2, i: '0', component: 'MyComponentA' },
      { x: 2, y: 0, w: 2, h: 2, i: '1', component: 'MyComponentB' },
      // ...更多布局配置
    ]);
 
    return {
      layout
    };
  }
};
</script>
 
<style scoped>
.layout-container {
  width: 100%;
  height: 100vh;
}
</style>

这个代码实例展示了如何在Vue 3应用中使用vue-grid-layout库来创建一个可拖拽和调整大小的布局系统。layout数组定义了每个组件的位置、尺寸和必要的标识。GridLayout和GridItem组件负责渲染布局和处理用户的交互。这个例子简洁明了，并且提供了一个清晰的模板和逻辑分离的组件结构。