vue项目中vue-grid-layout使用简介

最新推荐文章于 2024-06-21 21:01:11 发布

wodomXQ

最新推荐文章于 2024-06-21 21:01:11 发布

阅读量2.2k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_26887683/article/details/128865566

版权

安装

npm & yarn安装指令

# 使用 npm
npm install vue-grid-layout --save

# 使用 yarn
yarn add vue-grid-layout

使用

引入

import { GridLayout, GridItem } from 'vue-grid-layout'

DOM结构

<grid-layout
    :col-num="12"
    :is-draggable="draggable"
    :is-resizable="resizable"
    :layout="layout"
    :responsive="responsive"
    :row-height="100"
    :use-css-transforms="true"
    :vertical-compact="true"
>
    <grid-item
        v-for="(item, indexVar) in layout"
        :key="indexVar"
        :h="item.h"
        :i="item.i"
        class="grid-item-wrap"
        :static="item.static"
        :w="item.w"
        :x="item.x"
        :y="item.y"
    >
        <component :is="item.components" class="grid-item" />
    </grid-item>
</grid-layout>

js配置

export default {
  components: {
    GridLayout,
    GridItem,
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 24, h: 6, i: '0', components: 'MapTable' },
        { x: 0, y: 0, w: 6, h: 4, i: '1', components: 'VDeviceBar' },
        { x: 1, y: 0, w: 6, h: 4, i: '2', components: 'VErrorDeviceList' },
        { x: 0, y: 0, w: 6, h: 4, i: '3', components: 'VHealthTrendLine' },
        { x: 1, y: 0, w: 6, h: 4, i: '4', components: 'VCompleteRateChart' }
      ],
      draggable: true,
      resizable: false,
      responsive: false,
      index: 0,
    }
  },
  watch: {
    layout: {
      handler: function(val) {
        if (val) {
          sessionStorage.setItem('layout', JSON.stringify(val))
        }
      },
      deep: true
    }
  },
  async mounted() {
    const layout = sessionStorage.getItem('layout')

    this.$nextTick(() => {
      if (layout) {
        this.layout = JSON.parse(layout)
      }
    })
  }

}

文档API

属性

GridLayout

layout数据源。值必须为 Array，其数据项为 Object。每条数据项必须有 i, x, y, w 和 h 属性。请参考下面的 GridItem。
- type: Array
- required: true
responsiveLayouts如果 responsive 设置为 true，该配置将作为栅格中每个断点的初始布局。键值是断点名称，每项的值都是类似 layout 属性定义的数据结构，值必须为 Array，其数据项为 Object。例如： {lg: [layout items], md: [layout items]}。需要注意的是，在创建栅格布局后设置该属性无效。
- type: Object
- required: false
- default: {}
colNum定义栅格系统的列数，其值需为自然数。
- type: Number
- required: false
- default: 12
rowHeight每行的高度，单位像素。
- type: Number
- required: false
- default: 150
maxRows定义最大行数。
- type: Number
- required: false
- default: Infinity
margin定义栅格中的元素边距。值必须是包含两个 Number的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素。
- type: Array
- required: false
- default: [10, 10]
isDraggable标识栅格中的元素是否可拖拽。
- type: Boolean
- required: false
- default: true
isResizable标识栅格中的元素是否可调整大小。
- type: Boolean
- required: false
- default: true
isMirrored标识栅格中的元素是否可镜像反转。
- type: Boolean
- required: false
- default: false
autoSize标识容器是否自动调整大小。
- type: Boolean
- required: false
- default: true
verticalCompact标识布局是否垂直压缩。
- type: Boolean
- required: false
- default: true
useCssTransforms标识是否使用CSS属性 transition-property: transform;。
- type: Boolean
- required: false
- default: true
responsive标识布局是否为响应式。
- type: Boolean
- required: false
- default: false
breakpoints为响应式布局设置断点，其中参数代表不同设备的宽度：lg（large），md（medium），sm（small），xs（extra small）。
- type: Object
- required: false
- default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
cols设置每个断点对应的列数。
- type: Object
- required: false
- default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
useStyleCursor标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 false也许可以缓解布局问题。
- type: Boolean
- required: false
- default: true
preventCollision值设置为ture时，栅格只能拖动至空白处。
- type: Boolean
- default: false

GridItem

i栅格中元素的ID。
- type: String
- required: true
x标识栅格元素位于第几列，需为自然数。
- type: Number
- required: true
y标识栅格元素位于第几行，需为自然数。
- type: Number
- required: true
w标识栅格元素的初始宽度，值为colWidth的倍数。
- type: Number
- required: true
h标识栅格元素的初始高度，值为rowHeight的倍数。
- type: Number
- required: true
minW栅格元素的最小宽度，值为colWidth的倍数。如果w小于minW，则minW的值会被w覆盖。
- type: Number
- required: false
- default: 1
minH栅格元素的最小高度，值为rowHeight的倍数。如果h小于minH，则minH的值会被h覆盖。
- type: Number
- required: false
- default: 1
maxW栅格元素的最大宽度，值为colWidth的倍数。如果w大于maxW，则maxW的值会被w覆盖。
- type: Number
- required: false
- default: Infinity
maxH栅格元素的最大高度，值为rowHeight的倍数。如果h大于maxH，则maxH的值会被h覆盖。
- type: Number
- required: false
- default: Infinity
isDraggable标识栅格元素是否可拖拽。如果值为null则取决于父容器。
- type: Boolean
- required: false
- default: null
isResizable标识栅格元素是否可调整大小。如果值为null则取决于父容器。
- type: Boolean
- required: false
- default: null
static标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。
- type: Boolean
- required: false
- default: false
dragIgnoreFrom标识栅格元素中哪些子元素无法触发拖拽事件，值为css-like选择器。请参考 interact.js docs中的ignoreFrom。
- type: String
- required: false
- default: 'a, button'
dragAllowFrom标识栅格元素中哪些子元素可以触发拖拽事件，值为css-like选择器。如果值为null则表示所有子元素（dragIgnoreFrom的除外）。请参考 interact.js docs中的allowFrom。
- type: String
- required: false
- default: null

<grid-item
            v-for="(item, indexVar) in layout"
            :key="indexVar"
            :h="item.h"
            :i="item.i"
            class="grid-item-wrap"
            :static="item.static"
            :w="item.w"
            :x="item.x"
            :y="item.y"
            drag-allow-from=".header"
            drag-ignore-from=".content"
          >
            <component :is="item.components" class="grid-item" />
          </grid-item>

如上设置可是鼠标在头部标题时模块可以拖动，在图表区时不能拖动，拖拽不影响图表区本身的操作，例如点击操作等。

resizeIgnoreFrom标识栅格元素中哪些子元素无法触发调整大小的事件，值为css-like选择器。
- type: String
- required: false
- default: 'a, button'

事件

每一个栅格元素grid-item上都可以添加监听器，用于监听移动和调整大小事件，这样父级Vue对象就可以收到通知。

示例：

<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"
    @layout-created="layoutCreatedEvent"
    @layout-before-mount="layoutBeforeMountEvent"
    @layout-mounted="layoutMountedEvent"
    @layout-ready="layoutReadyEvent"
    @layout-updated="layoutUpdatedEvent"
>

    <grid-item v-for="item in layout"
         :x="item.x"
         :y="item.y"
         :w="item.w"
         :h="item.h"
         :i="item.i"
         :key="item.i"
         @resize="resizeEvent"
         @move="moveEvent"
         @resized="resizedEvent"
         @moved="movedEvent"
	>
         {{item.i}}
    </grid-item>
</grid-layout>

layoutCreatedEvent对应Vue生命周期的created

    layoutCreatedEvent: function(newLayout){
      console.log("Created layout: ", newLayout)
    }

layoutBeforeMountEvent对应Vue生命周期的beforeMount

    layoutBeforeMountEvent: function(newLayout){
      console.log("beforeMount layout: ", newLayout)
    }

layoutMountedEvent对应Vue生命周期的mounted

    layoutMountedEvent: function(newLayout){
      console.log("Mounted layout: ", newLayout)
    }

layoutReadyEvent当完成mount中的所有操作时生成的事件

    layoutReadyEvent: function(newLayout){
      console.log("Ready layout: ", newLayout)
    }

layoutUpdatedEvent更新事件（布局更新或栅格元素的位置重新计算）

    layoutUpdatedEvent: function(newLayout){
      console.log("Updated layout: ", newLayout)
    }

moveEvent移动时的事件

    moveEvent: function(i, newX, newY){
        console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
    },

resizeEvent调整大小时的事件

    resizeEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },

movedEvent移动后的事件

    movedEvent: function(i, newX, newY){
        console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
    },

resizedEvent调整大小后的事件

    /**
     *
     * @param i the item id/index
     * @param newH new height in grid rows
     * @param newW new width in grid columns
     * @param newHPx new height in pixels
     * @param newWPx new width in pixels
     *
     */
    resizedEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },