淺談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