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

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 項目中

// 普通項目中

代碼片段

<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” // 移動結束觸發 注意:隻有當位置相對上一次發生改變才會觸發

        >

    // 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}}

       //

​

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() {

  };

};