vue-grid-layout-split

前言

由于最近公司要求实现模仿阿里云控制台的布局方式。我便进行了研究。其中包括拖拽，自适应，栅格元素高度调整等功能。我便对此进行了研究。考虑到后续系统还要复用，我便把这个封装成组件发布出来了，底层实现依赖于 vue-grid-layout 。

演示地址

paobai.github.io/vue-grid-la…

效果预览图

拖动效果

拖动.gif

调整间距

调整间距.gif

添加删除元素

添加删除元素.gif

源码

github：github.com/paobai/vue-…

入门指南

目前只支持VUE3。如果有VUE2需求的在ISSUE提，star点多了我也会自己去加的。

安装

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

最后

若是有需求的话可以提pr或者issue

最重要的是。有帮助的话，求求掘金兄弟姐妹们star⭐下吧。谢谢啦~~~✿✿ヽ(°▽°)ノ✿

就是听说点赞会加薪、升职、变帅、变美欸~

作者的其他文章：

将公司旧webpack3升级到5，踩坑总结

webpack5性能优化篇-前端必须会系列-分析如何加快构建并将包体积变小

防抖节流优化版--最小修改代码无缝嵌入项目

vue-grid-layout-split——模拟阿里云控制台布局的vue3组件