vue 网格布局_Vue.js的可拖动和可调整大小的网格布局

孙钱青

2023-12-01

vue 网格布局

Vue网格布局 (vue-grid-layout)

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout

vue-grid-layout是Vue.js的网格布局系统，例如Gridster。在React-Grid-Layout中大受启发

View demo 查看演示 Download Source 下载源

使用vue-grid-layout的项目 (Projects using vue-grid-layout)

Draxed
德拉克斯

Know of others? Create a PR to let me know!

认识别人吗？ 建立公关让我知道！

特征 (Features)

Draggable widgets
可拖动的小部件
Resizable widgets
可调整大小的小部件
Bounds checking for dragging and resizing
边界检查以进行拖动和调整大小
Widgets may be added or removed without rebuilding grid
无需重建网格即可添加或删除小部件
Layout can be serialized and restored
布局可以序列化和还原
Automatic RTL support
自动RTL支持

入门 (Getting Started)

安装 (Installation)

Install the vue-grid-layout package package using npm:

使用npm安装vue-grid-layout 软件包：

npm install vue-grid-layout

用法 (Usage)

npm install vue-grid-layout

or include the script in your html (download from releases):

或将脚本包含在html中(从releases下载)：

<script src="vue-grid-layout.min.js"></script>

var testLayout = [
	    {"x":0,"y":0,"w":2,"h":2,"i":"0"},
	    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
	    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
	    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
	    {"x":8,"y":0,"w":2,"h":3,"i":"4"},
	    {"x":10,"y":0,"w":2,"h":3,"i":"5"},
	    {"x":0,"y":5,"w":2,"h":5,"i":"6"},
	    {"x":2,"y":5,"w":2,"h":5,"i":"7"},
	    {"x":4,"y":5,"w":2,"h":5,"i":"8"},
	    {"x":6,"y":4,"w":2,"h":4,"i":"9"},
	    {"x":8,"y":4,"w":2,"h":4,"i":"10"},
	    {"x":10,"y":4,"w":2,"h":4,"i":"11"},
	    {"x":0,"y":10,"w":2,"h":5,"i":"12"},
	    {"x":2,"y":10,"w":2,"h":5,"i":"13"},
	    {"x":4,"y":8,"w":2,"h":4,"i":"14"},
	    {"x":6,"y":8,"w":2,"h":4,"i":"15"},
	    {"x":8,"y":10,"w":2,"h":5,"i":"16"},
	    {"x":10,"y":4,"w":2,"h":2,"i":"17"},
	    {"x":0,"y":9,"w":2,"h":3,"i":"18"},
	    {"x":2,"y":6,"w":2,"h":2,"i":"19"}
	];
	
	var GridLayout = VueGridLayout.GridLayout;
	var GridItem = VueGridLayout.GridItem;
	
	new Vue({
	    el: '#app',
	    components: {
	        GridLayout,
	        GridItem,
	    },
	    data: {
	        layout: testLayout,
	    },
	});

<grid-layout
            :layout="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :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">
            {{item.i}}
        </grid-item>
    </grid-layout>

文献资料 (Documentation)

物产 (Properties)

网格布局 (GridLayout)

layout

布局
- ArrayArray
- truetrue
This is the initial layout of the grid.

这是网格的初始布局。

The value must be an Array of Object items. Each item must have i, x, y, w and h proprties. Please refer to GridItem documentation below for more informations.

该值必须是Object项Array 。每个项目都必须具有i ， x ， y ， w和h属性。请参阅下面的GridItem文档以获取更多信息。
colNum

专栏
- NumberNumber
- falsefalse
- 1212
Says how many columns the grid has.

说出网格有多少列。

The value should be a natural number.

该值应为自然数 。
rowHeight

rowHeight
- NumberNumber
- falsefalse
- 150150
Says what is a height of a single row in pixels.

说一行的高度(以像素为单位)。
maxRows

maxRows
- NumberNumber
- falsefalse
- InfinityInfinity
Says what is a maximal number of rows in the grid.

说出网格中最大的行数。
margin

保证金
- ArrayArray
- falsefalse
- [10, 10][10, 10]
Says what are the margins of elements inside the grid.

说出网格内元素的边距是多少。

The value must be a two-element Array of Number. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.

该值必须是两个元素的Number Array 。每个值均以像素表示。第一个元素是水平边距，第二个元素是垂直边距。
isDraggable

isDraggable
- BooleanBoolean
- falsefalse
- truetrue
Says if the grids items are draggable.

说网格项目是否可拖动。
isResizable

isResizable
- BooleanBoolean
- falsefalse
- truetrue
Says if the grids items are resizable.

说网格项目是否可调整大小。
isMirrored

isMirrored
- BooleanBoolean
- falsefalse
- falsefalse
Says if the RTL/LTR should be reversed.

说是否应该逆转RTL / LTR。
autoSize

自动尺寸
- BooleanBoolean
- falsefalse
- truetrue
Says if the container height should swells and contracts to fit contents.

说容器高度是否应该膨胀并收缩以适合内容物。
verticalCompact

verticalCompact
- BooleanBoolean
- falsefalse
- truetrue
Says if the layout should be compact vertically.

说布局是否应在垂直方向上紧凑。
useCssTransforms

useCssTransforms
- BooleanBoolean
- falsefalse
- truetrue
Says if the CSS transition-property: transform; should be used.

说CSS transition-property: transform; 应该使用。

网格项 (GridItem)

i

一世
- StringString
- truetrue
This is the unique identifier of the item.

这是商品的唯一标识符。
x

X
- NumberNumber
- truetrue
Says what is a initial horizontal position of the item (in which column it should be placed).

说项目的初始水平位置是什么(应将其放置在哪一列中)。

The value must be a whole number.

该值必须是整数。
y

ÿ
- NumberNumber
- truetrue
Says what is a initial vertical position of the item (in which row it should be placed).

说项目的初始垂直位置是什么(应将其放置在哪一行)。

The value must be a whole number.

该值必须是整数。
w

w
- NumberNumber
- truetrue
Says what is a initial width of the item.

说什么是项目的初始宽度。

The value is a number that is multiplied by colWidth.

该值是一个数字乘以colWidth 。
h

H
- NumberNumber
- truetrue
Says what is a initial height of the item.

说什么是物品的初始高度。

The value is a number that is multiplied by rowHeight.

该值是一个乘以rowHeight 。
minW

最小功率
- NumberNumber
- falsefalse
- 11
Says what is a minimal width of the item. If w will be smaller then minW then w will be set to minW.

说什么是物品的最小宽度。如果w较小，则minW则w将设置为minW 。

The value is a number that is multiplied by colWidth.

该值是一个数字乘以colWidth 。
minH

分钟
- NumberNumber
- falsefalse
- 11
Says what is a minimal hieght of the item. If h will be smaller then minH then h will be set to minH.

说什么是物品的最小高度。如果h较小，则minH则h将设置为minH 。

The value is a number that is multiplied by rowHeight.

该值是一个乘以rowHeight 。
maxW

最大功率
- NumberNumber
- falsefalse
- InfinityInfinity
Says what is a maximal width of the item. If w will be bigger then maxW then w will be set to maxW.

说什么是物品的最大宽度。如果w会更大然后maxW然后w将被设置为maxW 。

The value is a number that is multiplied by colWidth.

该值是一个数字乘以colWidth 。
maxH

最高
- NumberNumber
- falsefalse
- InfinityInfinity
Says what is a maximal height of the item. If h will be bigger then maxH then h will be set to maxH.

说什么是物品的最大高度。如果h会更大，则maxH然后h将被设置为maxH 。

The value is a number that is multiplied by rowHeight

该值是一个数字乘以rowHeight
isDraggable

isDraggable
- BooleanBoolean
- falsefalse
- nullnull
Says if item is draggable.

说项目是否可拖动。

If default value is null then it's inherited from parent.

如果默认值为null则它是从父级继承的。
isResizable

isResizable
- BooleanBoolean
- falsefalse
- nullnull
Says if item is resizable.

说项目是否可调整大小。

If default value is null then it's inherited from parent.

如果默认值为null则它是从父级继承的。
dragIgnoreFrom

dragIgnoreFrom
- StringString
- falsefalse
- 'a, button''a, button'
Says which elements of the item shouldn't trigger drag event of the item.

说出该项目的哪些元素不应该触发该项目的拖动事件。

The value is css-like selector string.

该值是css-like选择器字符串。

For more info please refer to ignoreFrom in interact.js docs.

有关更多信息，请参考interact.js docs中的 ignoreFrom 。
dragAllowFrom

dragAllowFrom
- StringString
- falsefalse
- nullnull
Says which elements of the item should trigger drag event of the item.

说出该项目的哪些元素应触发该项目的拖动事件。

The value is css-like selector string.

该值是css-like选择器字符串。

If null then one can drag by any (excluding dragIgnoreFrom) element of the item.

如果为null则可以拖动该项目的任何元素(不包含dragIgnoreFrom )。

For more info please refer to allowFrom in interact.js docs.

有关更多信息，请参阅interact.js docs中的 allowFrom 。
resizeIgnoreFrom

resizeIgnoreFrom
- StringString
- falsefalse
- 'a, button''a, button'
Says which elements of the item shouldn't trigger resize event of the item.

说出该项目的哪些元素不应该触发该项目的调整大小事件。

The value is css-like selector string.

该值是css-like选择器字符串。

For more info please refer to ignoreFrom in interact.js docs.

有关更多信息，请参考interact.js docs中的 ignoreFrom 。

大事记 (Events)

Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized. Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.

可以将移动和调整大小事件侦听器添加到每个网格项目，以便在移动或调整网格元素时可以通知父Vue。如果唯一需要的通知是项目完成移动或调整大小时，则可以添加移动和调整大小的事件侦听器。

Working example here

这里的工作示例

<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-updated="layoutUpdatedEvent"
    >

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

layoutUpdatedEvent

layoutUpdatedEvent

Layout updated event

布局更新事件

Every time the layout has finished updating and positions of all grid-items are recalculated

每次版面更新完成并重新计算所有网格项目的位置时

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

moveEvent

moveEvent

Move event

移动事件

Every time an item is being moved and changes position

每次移动物品并更改位置

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

resizeEvent

resizeEvent

Resize event

调整大小事件

Every time an item is being resized and changes size

每次调整大小并更改大小时，

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

movedEvent

moveEvent

Moved event

活动事件

Every time an item is finished being moved and changes position

每次完成移动并更改位置时，

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

resizedEvent

resizedEvent

Resized event

调整大小的活动

Every time an item is finished being resized and changes size

每次完成调整项目大小并更改大小时

/**
     * 
     * @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);
    },

有助于 (Contribute)

If you have a feature request, please add it as an issue or make a pull request.

如果您有功能请求，请将其添加为问题或提出拉取请求。

待办事项清单 (TODO List)

[x] Basic grid layout
[x]基本网格布局
[ ] Responsive
[]React灵敏
[x] Draggable grid items
[x]可拖动的网格项
[x] Resizable grid items
[x]可调整大小的网格项目
[ ] Static elements
[]静态元素
[x] Min/max w/h per item
[x]最小/最大w / h

翻译自: https://vuejsexamples.com/a-draggable-and-resizable-grid-layout-for-vue-js/