alt-vue-grid-layout

doesburg

Doesburg(杜斯伯格)，是一个布局设计器，支持拖拽布局、拖拽设置大小。

如何使用

<div>
    <grid ref="grid"></grid>
</div>

import VueGrid from 'alt-vue-grid-layout'
 
let Grid = VueGrid.createGrid()
let layout = [
    {"x":0,"y":0,"w":2,"h":2,"i":"0"},
    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
    {"x":8,"y":0,"w":2,"h":3,"i":"4"}
]
 
new Vue({
    components: {
        Grid
    },
    mounted(){
        this.$refs.grid.setLayout(layout)
    }
}

全局配置属性

属性 | 说明 | 默认值 -- | -- | -- isDraggable | Boolean类型，是否支持拖拽布局，true - 支持，false - 不支持 | true isResizable | Boolean类型，是否支持拖拽控制元素大小，true - 支持，false - 不支持 | true margin | Array类型，如 [3, 3]，设置可拖拽模块左侧和下侧间距，最小值为[2, 2]，表示没有间距 | [10, 10] verticalCompact | Boolean类型，设置垂直方向是否自动忽略空白向上填充 | true useCssTransforms | Boolean类型，是否使用css的transform属性 | true colNum | Number类型，栅格列数 | 12 rowHeight | Number类型，每一行的高度 | 150 maxRows | Number类型，设置布局设计器最大行数 | Infinity backgroundColor | String类型，css-like，设置所有卡片的背景颜色和透明度 | 'rgba(255,255,255,0.5)' gridItemClass | String类型，统一设置卡片的自定义class | <空> closeHandlerClass | String类型，统一设置关闭按钮的class | <空> resizeHandlerClass | String类型，统一设置 拖拽大小的class | <空> placeholderClass | String类型，统一设置占位符的class | <空> isShowOriginCloseBtn | Boolean类型，统一设置是否显示自带的关闭按钮，可以使用注册组件的this.altCardProps.close()来关闭组件 | true

方法

• addWidgetType注册组件类型

  1. 注册单个组件: addWidgetType(name, widget)

     • 参数:
       • {String} name
       • {Object} widget
     • 用法: 通过layout中每一项的type类型，从注册的组件中渲染对应组件

     • 示例:

       import VueGrid from 'alt-vue-grid-layout'
       import Type1 from './Type1.vue';
        
       let Grid = VueGrid.createGrid()
       
       Grid.addWidgetType('type1', Type1)
       let layout = [
           {x:0, y:0, w:2, h:2, i:"0", type:"Type1"}
       ]
       
       

  2. 批量注册组件: addWidgetType(typeMap)

     • 参数:
       • {Object} typeMap
     • 用法: 通过layout中每一项的type类型，从注册的组件中渲染对应组件

     • 示例:

       import VueGrid from 'alt-vue-grid-layout'
       import Type1 from './Type1.vue';
       import Type2 from './Type2.vue';
        
       let Grid = VueGrid.createGrid()
       
       Grid.addWidgetType({
           type1: Type1,
           type2: Type2
       })
       let layout = [
           {x:0, y:0, w:2, h:2, i:"0", type:"Type1"},
           {x:0, y:0, w:2, h:2, i:"0", type:"Type2"}
       ]
       
       

实例方法

• setLayout(layout)

  • 参数:
    • {array} layout
      • {String} i
      • {Number} x
      • {Number} y
      • {Number} w
      • {Number} h
      • {string} type 卡片使用的组件类型
      • {Number} minH 可选，设置卡片最小高度
      • {Number} maxH 可选，设置卡片最大高度
      • {Number} minW 可选，设置卡片最小宽度
      • {Number} maxW 可选，设置卡片最大宽度
      • {Boolean} isDraggable 可选，设置卡片是否可拖拽位置
      • {Boolean} isResizable 可选，设置卡片是否可拖拽大小
      • {Boolean} isShowOriginCloseBtn 可选，设置卡片是否显示自带的关闭按钮
      • {String} gridItemClass 可选，单个卡片的class
      • {String} closeHandlerClass 可选，单个卡片关闭按钮的class
      • {String} resizeHandlerClass 可选，单个卡片拖拽大小的class
  • 用法: 设置布局数组，卡片内部可以通过this.close()来关闭卡片

• addItem(itemInfo)

  • 参数:
    • {Object} itemInfo
    • {Number} itemInfo.x 坐标x
    • {Number} itemInfo.y 坐标y
    • {Number} itemInfo.w 宽度
    • {Number} itemInfo.h 高度
    • {string} type 卡片使用的组件类型
    • {Number} minH 可选，设置卡片最小高度
    • {Number} maxH 可选，设置卡片最大高度
    • {Number} minW 可选，设置卡片最小宽度
    • {Number} maxW 可选，设置卡片最大宽度
    • {Boolean} isDraggable 可选，设置卡片是否可拖拽位置
    • {Boolean} isResizable 可选，设置卡片是否可拖拽大小
    • {Boolean} isShowOriginCloseBtn 可选，设置卡片是否显示自带的关闭按钮
    • {String} gridItemClass 可选，单个卡片的class
    • {String} closeHandlerClass 可选，单个卡片关闭按钮的class
    • {String} resizeHandlerClass 可选，单个卡片拖拽大小的class

• deleteItem(id)

  • 参数：
    • {String} id 卡片id

事件

• move(item) 移动任意卡片
  • 参数:
    • {Object} item 被移动的元素
• moved(item) 移动结束触发
  • 参数:
    • {Object} item 被移动的元素
• resize(item, newSize) 拖动设置大小
  • 参数:
    • {Object} item 被改变大小的元素
    • {Object} newSize 改变后的像素大小，{width: 20px, height: 30px}
• resized(item, newSize) 拖动设置大小
  • 参数:
    • {Object} item 被改变大小的元素
    • {Object} newSize 改变后的像素大小，{width: 20px, height: 30px}

组件

组件是一个Object，类vue对象结构，暂时不支持vue子类，如

let type1 = {
    mounted(){
        console.log('mounted')
    }
}

组件内部支持vue的生命周期

组件事件

组件内部可以通过this.$on('eventName', fn)来监听事件

• move(item) 移动当前卡片
  • 参数:
    • {Object} item 当前元素
• moved(item) 移动结束触发
  • 参数:
    • {Object} item 当前元素
• resize(item, newSize) 拖动设置大小
  • 参数:
    • {Object} item 当前元素
    • {Object} newSize 改变后的像素大小，{width: 20px, height: 30px}
• resized(item, newSize) 拖动设置大小
  • 参数:
    • {Object} item 当前元素
    • {Object} newSize 改变后的像素大小，{width: 20px, height: 30px}

组件方法

组件内部可以通过this.altCardProps.close()来关闭当前组件

组件公共属性

组件内部可以通过this.altCardProps.card获取layout中当前组件的参数

项目启动

yarn install

开发模式

yarn run serve

编译为页面

yarn run build

编译为库

yarn run build-lib