浅谈Vue个性化dashBoard 布局

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