首页 前端知识 vue项目中区域拖拽修改大小, Vue Grid Layout -️ 适用Vue.js的栅格布局系统

vue项目中区域拖拽修改大小, Vue Grid Layout -️ 适用Vue.js的栅格布局系统

2024-05-25 09:05:56 前端知识 前端哥 561 609 我要收藏

目录

一、安装

二、使用

三、属性介绍

GridLayout

GridItem

 四、事件介绍

GridLayout

layoutCreated

layoutBeforeMountEvent

layoutMountedEvent

layoutReadyEvent

layoutUpdatedEvent

breakpointChangedEvent

GridItem

moveEvent

resizeEvent

movedEvent

resizedEvent

containerResizedEvent


一、安装

vue2项目中:

npm install vue-grid-layout --save

vue3项目中:

npm install vue-grid-layout@3.0.0-beta1 --save

二、使用

在main.js中引入

// 引入

import gridLayout from 'vue-grid-layout' 

// 挂载使用

app.use(gridLayout)

在页面中使用

<template>
    <div class="viewer">
        <el-button type="primary">测试按钮</el-button>
        <grid-layout :layout.sync="state.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 class="box" v-for="item in state.layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
                {{ item.i }}
            </grid-item>
        </grid-layout>
    </div>
</template>

<script setup name="home">

const state = reactive({
    layout: [
        { "x": 0, "y": 0, "w": 2, "h": 4, "i": "first" },
        { "x": 2, "y": 0, "w": 2, "h": 4, "i": "second" },
        { "x": 4, "y": 0, "w": 2, "h": 4, "i": "third" },
        { "x": 6, "y": 0, "w": 2, "h": 4, "i": "ringChart" },
        { "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": 3, "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" }
    ],
})

onMounted(() => {
    console.log('state.layout',state.layout)
})

</script>

<style scoped lang="scss">
.viewer {
    height: 100%;
    position: relative;
    .box{
        border: 1px solid #000;
        padding: 10px;
        background: #000;
        color: #fff;
    }
}
</style>

三、属性介绍

GridLayout
属性名称详情信息

layout

type: Array

required: true

这是栅格的初始布局。

数据源。值必须为 Array,其数据项为 Object。 每条数据项必须有 i, x, y, w 和 h 属性。 请参考下面的 GridItem

responsiveLayouts

type: Object

required: false

default : {}

如果 responsive 设置为 true,该配置将作为栅格中每个断点的初始布局。键值是断点名称,每项的值都是类似 layout 属性定义的数据结构,值必须为 Array,其数据项为 Object。例如: {lg: [layout items], md: [layout items]}。需要注意的是,在创建栅格布局后设置该属性无效。 在创建GridLayout之后设置prop无效。

colNum

type: Number

required: false

default: 12

定义栅格系统的列数,其值需为自然数。

rowHeight

type: Number

required: false

default: 150

每行的高度,单位像素。

maxRows

type: Number

required: false

default: Infinity

定义最大行数。

margin

type: Array

required: false

default: [10, 10]

定义栅格中的元素边距。

值必须是包含两个 Number的数组,数组中第一个元素表示水平边距,第二个表示垂直边距,单位为像素。

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

标识布局是否垂直压缩。

preventCollision

type: Boolean

required: false

default: false

防止碰撞属性,值设置为ture时,栅格只能拖动至空白处。

useCssTransforms

type: Boolean

required: false

default: true

标识是否使用CSS属性 transition-property: transform;

responsive

type: Boolean

required: false

default: false

标识布局是否为响应式。

可以查看 responsiveLayouts、breakpoints和 cols

breakpoints

type: Object

required: false

default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }

为响应式布局设置断点。

可以查看 responsiveLayouts 和 cols

cols

type: Object

required: false

default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

设置每个断点对应的列数。

useStyleCursor

type: Boolean

required: false

default: true

标识是否使用动态鼠标指针样式。当拖动出现卡顿时,将此值设为 false也许可以缓解布局问题。 此属性无效

GridItem
属性名称详情信息

i

type: String

required: true

栅格中元素的ID。

x

type: Number

required: true

标识栅格元素位于第几列,需为自然数。

y

type: Number

required: true

标识栅格元素位于第几行,需为自然数。

w

type: Number

required: true

标识栅格元素的初始宽度,值为colWidth的倍数。

h

type: Number

required: true

标识栅格元素的初始高度,值为rowHeight的倍数。

minW

type: Number

required: false

default: 1

栅格元素的最小宽度,值为colWidth的倍数。

如果w小于minW,则minW的值会被w覆盖。

minH

type: Number

required: false

default: 1

栅格元素的最小高度,值为rowHeight的倍数。

如果h小于minH,则minH的值会被h覆盖。

maxW

type: Number

required: false

default: Infinity

栅格元素的最大宽度,值为colWidth的倍数。

如果w大于maxW,则maxW的值会被w覆盖。

maxH

type: Number

required: false

default: Infinity

栅格元素的最大高度,值为rowHeight的倍数。

如果h大于maxH,则maxH的值会被h覆盖。

isDraggable

type: Boolean

required: false

default: null

标识栅格元素是否可拖拽。如果值为null则取决于父容器。

isResizable

type: Boolean

required: false

default: null2

标识栅格元素是否可调整大小。如果值为null则取决于父容器。

static

type: Boolean

required: false

default: false

标识栅格元素是否为静态的(无法拖拽、调整大小或被其他元素移动)。

dragIgnoreFrom

type: String

required: false

default: 'a, button'

标识栅格元素中哪些子元素无法触发拖拽事件,值为css-like选择器。

请参考interact.js docs (opens new window)中的ignoreFrom

dragAllowFrom

type: String

required: false

default: null

标识栅格元素中哪些子元素可以触发拖拽事件,值为css-like选择器。

如果值为null则表示所有子元素(dragIgnoreFrom的除外)。

请参考interact.js docs (opens new window)中的allowFrom

resizeIgnoreFrom

type: String

required: false

default: 'a, button'

标识栅格元素中哪些子元素无法触发调整大小的事件,值为css-like选择器。

请参考interact.js docs (opens new window)中的ignoreFrom

四、事件介绍

GridLayout
layoutCreated

对应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

布局updated事件

更新事件(布局更新或栅格元素的位置重新计算)

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

断点更改事件

每次断点值由于窗口调整大小而改变

    /**
     * 
     * @param newBreakpoint the breakpoint name
     * @param newLayout the chosen layout for the breakpoint
     * 
     */
    breakpointChangedEvent: function(newBreakpoint, newLayout){
        console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
    },
GridItem
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);
    },
containerResizedEvent

栅格元素/栅格容器更改大小的事件(浏览器窗口或其他)

 /**
     * 
     * @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
     * 
     */
    containerResizedEvent: function(i, newH, newW, newHPx, newWPx){
        console.log("CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
    },
转载请注明出处或者链接地址:https://www.qianduange.cn//article/9458.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!