dashBoard布局在管理系统使用比较多;使用自己喜欢的方式进行自定义布局
使用npm 安装
npm install vue-grid-layout
全局使用
import vueGridLayout from 'vue-grid-layout';
Vue.use(vueGridLayout);
局部使用
var GridLayout = vueGridLayout.GridLayout;
var GridItem = vueGridLayout.GridItem;
注册组件
components:{
GridLayout,
GridItem,
},
数据源
var testLayout = [
{"x":0,"y":0,"w":2,"h":2,"i":"0",compentent:"组件"},
{"x":2,"y":0,"w":2,"h":4,"i":"1",compentent:"组件"},
{"x":4,"y":0,"w":2,"h":5,"i":"2",compentent:"组件"},
{"x":6,"y":0,"w":2,"h":3,"i":"3",compentent:"组件"},
];
渲染
<grid-layout
:layout="layout"
:col-num="12"
:row-height="30"
:is-draggable="true"
:is-resizable="true"
:vertical-compact="true"
:margin="[10, 10]"
:use-css-transforms="true"
>
<grid-item v-for="item in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i">
<component v-bind:is="item.component"> </component>
</grid-item>
</grid-layout>
参数配置
autoSize Boolean true 是否根据内容确定容器的高度
isDraggable Boolean true 是否支持推拽
isResizable Boolean true 是否支持改变大小
useCssTransforms Boolean true 是否使用自定义的过渡效果
verticalCompact Boolean true 是否使用verticalCompact布局
layout Array - 布局位置
事件
@resize="resizeEvent" //托拽时
@move="moveEvent" //移动时
@resized="resizedEvent" //托拽结束
@moved="movedEvent" //移动停止
是不错的dashBoard布局选择,参考来源
https://github.com/jbaysolutions/vue-grid-layout
加入我的技术群,一起学习
707196135