浅谈Vue个性化dashBoard 布局

Posted 2020-10-12 于文静0727

dashBoard布局在管理系统使用比较多；使用自己喜欢的方式进行自定义布局

使用npm 安装

1 npm install vue-grid-layout

全局使用

1 import vueGridLayout from ‘vue-grid-layout‘;
2 Vue.use(vueGridLayout);

局部使用

var GridLayout = vueGridLayout.GridLayout;
var GridItem = vueGridLayout.GridItem;

注册组件

1  components:{
2             GridLayout,
3             GridItem,
4     },

数据源

1 var testLayout = [
2       {"x":0,"y":0,"w":2,"h":2,"i":"0",compentent:"组件"},
3       {"x":2,"y":0,"w":2,"h":4,"i":"1",compentent:"组件"},
4       {"x":4,"y":0,"w":2,"h":5,"i":"2",compentent:"组件"},
5       {"x":6,"y":0,"w":2,"h":3,"i":"3",compentent:"组件"},
6     ];

 

渲染

 1 <grid-layout
 2             :layout="layout"
 3             :col-num="12"
 4             :row-height="30"
 5             :is-draggable="true"
 6             :is-resizable="true"
 7             :vertical-compact="true"
 8             :margin="[10, 10]"
 9             :use-css-transforms="true"
10     >
11         <grid-item v-for="item in layout"
12                    :x="item.x"
13                    :y="item.y"
14                    :w="item.w"
15                    :h="item.h"
16                    :i="item.i">
17           <component v-bind:is="item.component"> </component>
18         </grid-item>
19     </grid-layout>

 

参数配置

1 autoSize    Boolean true    是否根据内容确定容器的高度
2 isDraggable Boolean true    是否支持推拽
3 isResizable Boolean true    是否支持改变大小
4 useCssTransforms    Boolean true    是否使用自定义的过渡效果
5 verticalCompact Boolean true    是否使用verticalCompact布局
6 layout  Array   -   布局位置

事件

1 @resize="resizeEvent"     //托拽时
2 @move="moveEvent"         //移动时
3 @resized="resizedEvent"  //托拽结束
4 @moved="movedEvent"      //移动停止

 

是不错的dashBoard布局选择，参考来源 
https://github.com/jbaysolutions/vue-grid-layout