vue-grid-layout-split是模仿阿里云控制台布局方式的栅格布局系统, 适用于Vue.js。 灵感源自于 vue-grid-layout

当前版本: 1.0.0 (目前仅支持 Vue 3.0+)

在线演示

特性

• 参考阿里云控制台模块布局方式
• 可拖拽
• 可自定义栅格元素高度
• 固定左右布局
• 可自定义栅格元素间隙
• 可序列化和还原的布局

入门指南

安装

npm

# 使用 npm
npm install vue-grid-layout-split --save

# 使用 yarn
yarn add vue-grid-layout-split

引入

再main.js中使用组件

import vueGridLayoutSplit from "vue-grid-layout-split";
app.use(vueGridLayoutSplit);

使用

import { GridItemType } from "vue-grid-layout-split";
// ······
var defaultLayout = [
  {id: 0, x: 0, y: 0, height: 100, type: GridItemType.SMALL},
  {id: 1, x: 0, y: 0, height: 200, type: GridItemType.BIG},
  {id: 2, x: 0, y: 0, height: 150, type: GridItemType.SMALL},

  {id: 3, x: 1, y: 0, height: 250, type: GridItemType.SMALL},
  {id: 4, x: 2, y: 0, height: 130, type: GridItemType.SMALL},
  {id: 5, x: 1, y: 0, height: 100, type: GridItemType.SMALL},

  {id: 6, x: 2, y: 0, height: 100, type: GridItemType.SMALL},
  {id: 7, x: 2, y: 0, height: 180, type: GridItemType.SMALL},
  {id: 8, x: 2, y: 0, height: 100, type: GridItemType.SMALL}
];

new Vue({
    el: '#app',
    data: {
        defaultLayout: defaultLayout,
    },
});

  <vue-grid-layout-split ref="gridLayoutSplit"
                         :gridMargin="[20, 20]"
                         :editMode="true"
                         :defaultLayout="defaultLayout">
    <template #default="{value}">
      <div class="content-wrapper">
            <span style="margin-left: 16px">
              序号：{{value.id}}
            </span>
      </div>
    </template>
  </vue-grid-layout-split>

文档

属性

vueGridLayoutSplit

• defaultLayout

  • type: Array<GridItem>
  • required: true

  数据源。值必须为 Array，其数据项为 Object。 每条数据项有 id, x, y, height 和 type(GridItemType) 属性。 其中 id, height为必填项。请参考下面的 GridItem。

• editMode

  • type: Boolean
  • required: false
  • default: false

  组件是否为编辑状态，为编辑状态可以进行拖动和删除操作。

• gridMargin

  • type: Number | Array
  • required: false
  • default: 20

  定义栅格之间的间距,为列表时第一个参数为行间距，第二个参数为列间距。

• editMask

  • type: Boolean
  • required: false
  • default: true

  是否需要编辑状态的mask蒙版

GridItem

• id

  • type: String | Number
  • required: true

  栅格中元素的ID。

• x

  • type: Number
  • required: false
  • default: 0

  标识栅格元素位于第几列。一共三列，其中左边布局为0，1列。右边布局为2列，其中的当type为GridItemType.BIG时候，自动调整为0。需为自然数。

• y

  • type: Number
  • required: false
  • default: 0

  标识栅格元素位于第几行，需为自然数。

• height

  • type: Number
  • required: true

  标识栅格元素的高度，单位为px。

• type

  • type: GridItemType
  • required: false
  • default: GridItemType.SMALL

  标识栅格元素的类型。

• 其他参数

  • 其他参数自动保存到属性中，改变布局时一并返回

GridItemType

• SMALL: 小号元素
• BIG: 大号元素

事件

• changeLayout

  组件布局改变时的回调方法， 返回为当前layout

• addCardEvent

  调用新增方法addCard成功时的回调

方法

• getLayout 获取当前layout布局

  • 参数: 无
  • 返回
    • Array<GridItem>

• setLayout 重新设置layout布局

  • 参数
    • Array<GridItem>
  • 返回
    • 无

• clearLayout 清空当前layout

  • 参数: 无
  • 返回: 无

• deleteCard 删除某个栅格

  • 参数
    • id（元素的id）
  • 返回：无

• addCard 添加某个栅格

  • 参数
    • obj
      • type: GridItemType
      • required: true
    • toTop（是否从头加入栅格元素， false从尾部）
      • type: Boolean
      • required: false
      • default: true
  • 返回: 无

插槽（slot）

• default

  元素内容

  • 参数
    • value
      • type: GridItemType

• delete-tip

  右上角删除内容

  • 参数
    • value
      • type: GridItemType

如何贡献

请提交issue或PR。