vue-grid-layout 使用以及各項參數作用

vue-grid-layout

一個可以拖拽的 vue 布局方案

https://www.cnblogs.com/yasoPeng/p/9961732.html // 地址

下載

# install with npm    
npm install vue-grid-layout --save
​
# install with yarn    
yarn add vue-grid-layout

引入

import VueGridLayout from 'vue-grid-layout'; // vue 項目中 
<script src="vue-grid-layout.umd.min.js"></script> // 普通項目中

案例 以及所有屬性

<grid-layout
            //  作用        數據類型          必填        備注
             //===================================================
            // 網格初始化布局  數組       必填  每一項都必須具有i、x、y、w和h屬性 屬性用作什么 見下方
            :layout.sync="layout"  
            // 表示網格有多少列 數字           非必填    默認為12
            :col-num="12" 
            // 表示一行的高度(以像素為單位) 數字     非必填     默認值為150
            :row-height="30"
            // 表示網格中最大行數 數字          非必填     默認為無窮大
           :maxRows="20"
            // 表示網格項數是否可以拖動 Boolean        非必填     默認為true
            :is-draggable="true"
            // 表示網格是否可以改變帶大小 Boolean      非必填     默認為true
            :is-resizable="true"
            // RTL/LTR 的轉換 Boolean      非必填 默認為false
            :is-mirrored="false"
            // 容器是否適應內部變化 Boolean  非必填 默認為 true
           :autoSize="ture" 
            // 垂直方向上 是否應該緊湊布局 Boolean 非必填 默認為true
            :vertical-compact="true"
        // 網格之間的邊距 兩個數字組成的數組 第一個數字為水品距離 第二個為垂直距離 非必填 默認值為 [10,10]
            :margin="[10, 10]"
            // 是否使用css的transforms來排版 非必填 為false時 使用后采用定位方式來布局 默認為true
            :use-css-transforms="true" 
            // 布局是否應響應窗口寬度 非必填 默認false 為true時 會出現一些布局錯亂的問題
           :responsive="false" 
           //布局是否應響應為響應布局定義的窗口寬度斷點 對象類型 非必填 默認值
            // { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
           :breakpoints=" { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"
           // 定義每個斷點的列數
           :cols="{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }"
            // 生命周期
            
           @layout-created="layoutCreatedEvent"  // 布局創建事件
            @layout-before-mount="layoutBeforeMountEvent" // 布局安裝以前事件
            @layout-mounted="layoutMountedEvent"    // 布局安裝事件
            @layout-ready="layoutReadyEvent"    // 布局准備活動
            @layout-updated="layoutUpdatedEvent" // 格子位置 大小更新 
    >
      // 每個單獨控制 需要注意的是 每一個屬性都要在data中注冊一下 不然會導致不能拖拽 或者 不能放大縮小
       <grid-item
         class="echarts_box" 
          :x="layoutData[0].x" // 橫向距離
          :y="layoutData[0].y" // 縱向距離
          :w="layoutData[0].w" // 寬度
          :h="layoutData[0].h" // 高度
          :i="layoutData[0].i" // 唯一值 （重復時設置會導致一塊放大或縮小）string類型
          @resize="resizeEvent" // 當該元素 被放大縮小觸發的事件 
          @move="moveEvent" // 該元素移動時 觸發的事件
          @resized="resizedEvent" // 放大縮小結束 觸發事件 注意:必須當大小相對上一次發生改變結束時才會觸發
          @moved="movedEvent" // 移動結束觸發 注意:只有當位置相對上一次發生改變才會觸發 
        ></grid-item>
    // for循環 便利數組中的內容 渲染元素 
       // <grid-item v-for="item in layout"
       //          :x="item.x"
       //           :y="item.y"
       //           :w="item.w"
       //            :h="item.h"
       //          :i="item.i">
       //        {{item.i}}
       //</grid-item>
  </grid-layout>
​
import VueGridLayout from 'vue-grid-layout' //文件引入
const matedata = [
  {
    i: "0", // 索引值 必填 
    h: 4,   // 高度   必填
    w: 7,   // 寬度   必填
    x: 2,   // x 軸距離 必填
    y: 0,   // y軸距離 必填
    minW:5 // 最小寬度 當 w的值小於minW時 采用minW的值 
    minH:3 // 同上
    maxW:8 // 的最大寬度。如果w大於maxW，那么w將被設置為maxW。
    maxH:6 // 同上
    isDraggable:true // 單獨控制這一個盒子是否可以拖動 未填寫 繼承父元素的 非必填
    isResizable:true // 單獨控制這一個盒子是否可以調整大小 未填寫 繼承父元素的 非必填
    static:false // 這個盒子是靜態的  不能被其他元素改變位置 會被覆蓋在底部
    dragIgnoreFrom: '' // 屬性這值為css 選擇器 項的哪些元素不應觸發項的拖動事件// 具體不知道干嘛的 沒有用到
    dragAllowFrom:'' // 屬性這值為css 選擇器 項的哪些元素應觸發項的拖動事件 // 文檔這樣寫的
    resizeIgnoreFrom:''//屬性這值為css 選擇器 表示項的哪些元素不應觸發項的調整大小事件。//來自文檔翻譯
  },
  {
    h: 1,
    i: "1",
    w: 1,
    x: 0,
    y: 1
  },
  {
    h: 1,
    i: "2",
    w: 1,
    x: 0,
    y: 2
  },
  {
    h: 1,
    i: "3",
    w: 1,
    x: 0,
    y: 3
  }
];
export default {
  data() {
    return {
      layoutData: matedata, //  存放布局數據 數據格式如上
    };
  },
  components: {
    GridLayout, //注冊組件
    GridItem // 注冊
  },
  methods: {
      // 布局中單元改變事件  i, newX, newY 移動的坐標
      //                i, newH, newW, newHPx, newWPx 變化的大小
                            //newHPx, newWPx 是實際的像素
                        // newH, newW 是數據中的 以每個單位大小為基准點算
    resizeEvent(i, newH, newW, newHPx, newWPx) {
      console.log("大小正在改變",i, newH, newW, newHPx, newWPx);
    },
    moveEvent( i, newX, newY) {
      console.log("正在移動",i, newX, newY);
    },
    resizedEvent(i, newH, newW, newHPx, newWPx) {
      console.log("大小改變完了",i, newH, newW, newHPx, newWPx);
    },
    movedEvent( i, newX, newY) {
      console.log("移動結束了", i, newX, newY);
    },
       // 布局組件的生命周期  參數newLayout=> 布局的數據 每個布局數據
    layoutCreatedEvent(newLayout) {
      console.log("1Created");
    },
    layoutBeforeMountEvent(newLayout) {
      console.log("2Mount");
    },
    layoutMountedEvent(newLayout) {
      console.log("3Mounted");
    },
    layoutReadyEvent(newLayout) {
      console.log("4Ready");
    },
    layoutUpdatedEvent(newLayout) {
      console.log("Updated");
    }
  },
  created() {
  },
  mounted() {
  };
    
};