Vue Grid Layout 布局复现

Vue Grid Layout是一个用于构建响应式网格布局的轻量级库，它允许你在Vue.js应用中动态地管理元素的布局，支持CSS Grid或Flexbox。通过提供API和组件，你可以方便地创建复杂的网格系统，调整列宽、行高，以及元素间的对齐。

以下是使用Vue Grid Layout的基本步骤：

1. 安装依赖：首先，你需要安装`vue-grid-layout`库。可以使用npm或yarn进行安装：

   npm install vue-grid-layout

2. 引入并注册组件：在你的Vue组件中，引入`VueGridLayout`组件，并在模板中使用它：

   <template>
     <div id="layout">
       <vue-grid-layout :grid-template-columns="['1fr', '2fr', 'auto-fit']"
                         :rows="5" :height="400"></vue-grid-layout>
     </div>
   </template>

3. 编写数据绑定：配置组件的数据属性，如列数、行数等。例如，`grid-template-columns`表示列的宽度分配，`rows`则是行的数量：

   <script>
   import { VueGridLayout } from "vue-grid-layout";

   export default {
     components: {
       VueGridLayout,
     },
     data() {
       return {
         gridTemplateColumns: ['1fr', '2fr', 'auto-fit'],
         rows: 5,
         height: 400,
       };
     },
   };
   </script>

4. 使用API：你可以通过事件监听器控制元素的添加、移动和删除，比如`onLayoutChange`事件会触发当布局发生变化时。