vue-grid-layout+component 實作動态布局

是什麼？

git 位址： vue-grid-layout

官方 demo

代碼 線上示範

常用參數解析

GridLayout

參數	含義	資料類型
colNum	将一行分為多少塊	數字 預設 12
rowHeight	行高	數字 預設是機關是 px
isDraggable	是否可以拖拽	boolean
isResizable	是否可以改變大小
responsive	是否是響應式的

GridItem

		類型
i	id	類型不限
x	第幾列	數字
y	第幾行
w	占幾塊
h	高度 ，最後算出的元素高度是 h*rowHeight

主要代碼

定義一個預設的布局

var testLayout = [
  {x: 0,y: 0,w: 6,h: 5,i: "0",component: "test1"},//0列0行 寬為5塊，高為5*rowHeight
  {x: 6, y: 0, w: 6, h: 5, i: "1", component: "test2" },// 列為6(因為上一塊的寬度是6)
  {x: 0,y: 5,w: 12,h: 10,i: "2",component: "test3"},//自己算一算吧
  {x: 0,y: 15,w: 12,h: 10,i: "3",component: "test4"}
];      

生成布局

// 最外大的grid，綁定了testLayout的值，這樣testLayout 會随着使用者的拖拽放大縮小改變
// 可以參考官方的執行個體
<grid-layout
          :layout.sync="testLayout"
          :col-num="12"
          :row-height="55"
          :is-draggable="draggable"
          :is-resizable="resizable"
          :auto-size="true"
          :responsive="responsive"
        >
        // 周遊testLayout生成item
          <grid-item
            v-for="item in testLayout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.key"
          >
            <div class="assistor">
             // 定義一個關閉按鈕實作删除目前的
              <div class="close-icon" @click="deleteComponent(item.i)">
                <i class="el-icon-close"></i>
              </div>
              <h4 style="margin-bottom:10px">{{item.title}}</h4>
              // 這裡使用component來顯示元件。
              <component :is="item.component" style="padding-bottom:20px"></component>
            </div>
          </grid-item>
        </grid-layout>      

css 樣式

定義整個布局的背景顔色

.vue-grid-layout {
  position: relative;
  background: #fff;
}      

定義每一個 item 的樣式

.vue-grid-item{

}
      

GridItem 内部元素的樣式

​

這裡在 grid-item 内部加入一個 assistor，是因為如果 grid-item 内部元素的大小過大會出現滾動條

這裡将 border 加在 assistor 上，

當然你也可以加在.vue-grid-item 上，但是如果你需要動态的增加元件的話，在增加的時候 boder 會加不上。

.assistor {
  height: 100%;
  overflow-y: scroll;
  padding: 10px;
  border: 1px solid rgb(224, 219, 219);
}      

增加一個關閉的按鈕

.assistor {
  height: 100%;
  overflow-y: scroll;
  padding: 10px;
  border: 1px solid rgb(224, 219, 219);
}      

動态增減的實作思路

其實就是對 layout 進行操作

最簡單的加法，直接占滿第一行

this.testLayout.push({
        x: 0,
        y: 0,
        w: 12,
        h: 5,
        i: this.layout.length,
        name: "test5"
      });      

減法的話，直接根據傳進來的 id 删除即可

deleteComponent(id){
  this.testLayout = this.testLayout.filter(
      item =>item.id===id
    );
}
      

資料庫

直接将 testLayout 存入資料庫即可。