vue-grid-layout组件的改装--暴露布局方法

最新推荐文章于 2024-06-16 23:08:06 发布
最新推荐文章于 2024-06-16 23:08:06 发布
阅读量2.8w 收藏 28
点赞数 11
分类专栏： Vue 文章标签： vue-grid-layout布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42839080/article/details/88880964
版权

vue-grid-layout是一个非常优秀的vue栅格拖动布局的组件,使用方法请参考官网

属性 GridLayout参数:

layout
类型：Array
必需：true
这是网格的初始布局。
值必须是 Object 项的Array。 每个项目必须有 i，x，y，w 和 h proprties。 有关详细信息，请参阅 GridItem 文档 below。

colNum
类型：Number
必需：false
默认值：12
表示网格有多少列。
这个值应该是一个的自然数。

rowHeight
类型：Number
必需：false
默认值：150
表示单个行的高度以像素为单位。

maxRows
类型：Number
必需：false
默认值：Infinity
表示网格中的最大行数。

margin
类型：Array
必需：false
默认值：[10, 10]
表示网格的元素的边距是多少。
值必须是 Number的两个元素 Array。 每个值都用像素表示。 第一个元素是水平的margin，第二个元素是垂直边。

isDraggable
类型：Boolean
必需：false
默认值：true
表示网格的项是否可以拖动。

isResizable
类型：Boolean
必需：false
默认值：true
表示网格的项是否可以调整大小。

isMirrored
类型：Boolean
必需：false
默认值：false
表示是否应该反转 rtl/ltr。

autoSize
类型：Boolean
必需：false
默认值：true
表示容器高度是否应增大并收缩以适应内容。

verticalCompact
类型：Boolean
必需：false
默认值：true
表示布局是否应垂直为 compact。

useCssTransforms
类型：Boolean
必需：false
默认值：true
表示是否应使用 CSS transition-property: transform,否则是postion定位;。

属性GridItem参数

i
类型：String
必需：true
这是项的唯一标识符。

x
类型：Number
必需：true
表示项( 在哪个列中放置它)的初始水平位置。
值必须是一个整数。

y
类型：Number
必需：true
表示项( 应放置在哪一行)的初始垂直位置。
值必须是一个整数。

w
类型：Number
必需：true
表示项的初始宽度。
值是一个与 colWidth 相乘的数字。

h
类型：Number
必需：true
表示项的初始高度。
值是一个与 rowHeight 相乘的数字。

minW
类型：Number
必需：false
默认值：1
表示项的最小宽度。 如果 w 将小于 minW，那么 w 将被设置为 minW。
值是一个与 colWidth 相乘的数字。

minH
类型：Number
必需：false
默认值：1
表示什么是项的最小 hieght。 如果 h 将小于 minH，那么 h 将被设置为 minH。
值是一个与 rowHeight 相乘的数字。

maxW
类型：Number
必需：false
默认值：Infinity
表示项的最大宽度。 如果 w 大于 maxW，那么 w 将被设置为 maxW。
值是一个与 colWidth 相乘的数字。

maxH
类型：Number
必需：false
默认值：Infinity
表示什么是项的最大高度。 如果 h 大于 maxH，那么 h 将被设置为 maxH。
值是一个与 rowHeight 相乘的数字

isDraggable
类型：Boolean
必需：false
默认值：null
表示项是否可以拖动。
如果默认值为 null，则从父值继承。

isResizable
类型：Boolean
必需：false
默认值：null
表示项是否可以调整大小。
如果默认值为 null，则从父值继承。

dragIgnoreFrom
类型：String
必需：false
默认值：'a, button'
表示项的哪些元素不应触发项的拖动事件。
值为 css-like 选择器字符串。

dragAllowFrom
类型：String
必需：false
默认值：null
表示项的哪些元素应触发项的拖动事件。
值为 css-like 选择器字符串。
如果 null 可以拖动，则可以拖动项的任何( 排除 dragIgnoreFrom ) 元素。

resizeIgnoreFrom
类型：String
必需：false
默认值：'a, button'
表示项的哪些元素不应触发项的大小调整事件。
值为 css-like 选择器字符串。

上面的属性需要注意的是:

  1. w宽度时表示占据栅格的数比如: 1/12 2/12 3/12 (12是colNum)
  2. 在gridItem里w+x的最大和不应该超过colNum,否则会不生效
  3. verticalCompact表示的是垂直紧凑型布局,意思是当每一个gridItem上方没有其他栅格时,总会向上靠拢
  4. useCssTransforms为true时使用c3属性translate3D实现平移,为false是采用的定位实现平移

好了,总结上面的内容:

现在有一个需求,当点击按钮的时候,重新布局页面上的栅格系统:

在这里插入图片描述
具体实现思路无非就是重新给gridItem赋值,参数可以自定义,但是要注意到校验参数,w与x的值是不能为小数的,因为他们代表的是栅格数,表现到页面上:

栅格数 * 每一个栅格的宽度

layoutGridItem(){
            //出入的是对象
            // let config = {
            //     i: 0,
            //     sizeObj: {
            //         w: 2,
            //         h: 5
            //     },
            //     positionObj: {
            //         x: 2,
            //         y: 4
            //     }
            // }

            let config = [{
                i: 0,
                sizeObj: {
                    w: 2,
                    h: 5
                },
                positionObj: {
                    x: 2,
                    y: 4
                },
             },{
                i: 2,
                sizeObj: {
                    w: 2,
                    h: 5
                },
                positionObj: {
                    x: 2,
                    y: 4
                }
            }]

            //判断传入的参数是对象,还是数组
            if(Object.prototype.toString.call(config) == "[object Object]") {
                //校验参数
                try{
                   let xString = config.positionObj.x + ""
                   let wString = config.sizeObj.w + ""

                   //判断传入的参数是否是小数 
                   if(xString.includes(".") || wString.includes(".")) {
                        throw new Error("x 与 w参数不能是小数")
                   }

                   //判断x与w的和是否大于栅格数
                   if(config.positionObj.x + config.sizeObj.w > this.colNum) {
                       throw new Error("x 与 w之和不能大于栅格数")
                   }
                }catch(e) {
                    console.log(e)
                    return 
                }

                //设置新的布局格式
                this.verticalCompact = false
                this.layout.forEach(item => {
                    if(item.i == config.i) {
                        item.h = config.sizeObj.h
                        item.w = config.sizeObj.w
                        item.x = config.positionObj.x
                        item.y = config.positionObj.y
                        console.log(item.x,item.y,item.h,item.w)
                    }
                })
            }

            if(Object.prototype.toString.call(config) == "[object Array]") {
                //校验参数
                try{
                   config.forEach(_ => {
                        let xString = _.positionObj.x + ""
                        let wString = _.sizeObj.w + ""

                        //判断传入的参数是否是小数 
                        if(xString.includes(".") || wString.includes(".")) {
                                throw new Error("x 与 w参数不能是小数")
                        }

                        //判断x与w的和是否大于栅格数
                        if(_.positionObj.x + _.sizeObj.w > this.colNum) {
                            throw new Error("x 与 w之和不能大于栅格数")
                        }
                   })
                }
                catch(e) {
                    console.log(e)
                    return 
                }

                this.verticalCompact = false
                this.layout.forEach(item => {
                    config.forEach(_ => {
                        if(item.i == _.i) {
                            item.h = _.sizeObj.h
                            item.w = _.sizeObj.w
                            item.x = _.positionObj.x
                            item.y = _.positionObj.y
                            console.log(item.x,item.y,item.h,item.w)
                        }
                    })
                })
            }
        }

完整源码:

<template>
    <div class="layout">
       <grid-layout
            :layout.sync="layout"
            :col-num="colNum"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :vertical-compact="verticalCompact"
            :margin="[10, 10]"
            :use-css-transforms="false"
            class="hoverStyle">
            <grid-item v-for="item in layout" :key="item.i"
                    :x="item.x"
                    :y="item.y"
                    :w="item.w"
                    :h="item.h"
                    :i="item.i"
                    style="border: 1px solid #fff">
                {{item.i}}
            </grid-item>
        </grid-layout> 

        <button @click="layoutGridItem">点击</button>
    </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout';

export default {
    components: {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem
    },
    data(){
        return {
            layout: [
                {"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"},
            ],
            verticalCompact: true,
            colNum: 12 //栅格数
        }
    },
    methods: {
        
        layoutGridItem(){
            //出入的是对象
            // let config = {
            //     i: 0,
            //     sizeObj: {
            //         w: 2,
            //         h: 5
            //     },
            //     positionObj: {
            //         x: 2,
            //         y: 4
            //     }
            // }

            let config = [{
                i: 0,
                sizeObj: {
                    w: 2,
                    h: 5
                },
                positionObj: {
                    x: 2,
                    y: 4
                },
             },{
                i: 2,
                sizeObj: {
                    w: 2,
                    h: 5
                },
                positionObj: {
                    x: 2,
                    y: 4
                }
            }]

            //判断传入的参数是对象,还是数组
            if(Object.prototype.toString.call(config) == "[object Object]") {
                //校验参数
                try{
                   let xString = config.positionObj.x + ""
                   let wString = config.sizeObj.w + ""

                   //判断传入的参数是否是小数 
                   if(xString.includes(".") || wString.includes(".")) {
                        throw new Error("x 与 w参数不能是小数")
                   }

                   //判断x与w的和是否大于栅格数
                   if(config.positionObj.x + config.sizeObj.w > this.colNum) {
                       throw new Error("x 与 w之和不能大于栅格数")
                   }
                }catch(e) {
                    console.log(e)
                    return 
                }

                //设置新的布局格式
                this.verticalCompact = false
                this.layout.forEach(item => {
                    if(item.i == config.i) {
                        item.h = config.sizeObj.h
                        item.w = config.sizeObj.w
                        item.x = config.positionObj.x
                        item.y = config.positionObj.y
                        console.log(item.x,item.y,item.h,item.w)
                    }
                })
            }

            if(Object.prototype.toString.call(config) == "[object Array]") {
                //校验参数
                try{
                   config.forEach(_ => {
                        let xString = _.positionObj.x + ""
                        let wString = _.sizeObj.w + ""

                        //判断传入的参数是否是小数 
                        if(xString.includes(".") || wString.includes(".")) {
                                throw new Error("x 与 w参数不能是小数")
                        }

                        //判断x与w的和是否大于栅格数
                        if(_.positionObj.x + _.sizeObj.w > this.colNum) {
                            throw new Error("x 与 w之和不能大于栅格数")
                        }
                   })
                }
                catch(e) {
                    console.log(e)
                    return 
                }

                this.verticalCompact = false
                this.layout.forEach(item => {
                    config.forEach(_ => {
                        if(item.i == _.i) {
                            item.h = _.sizeObj.h
                            item.w = _.sizeObj.w
                            item.x = _.positionObj.x
                            item.y = _.positionObj.y
                            console.log(item.x,item.y,item.h,item.w)
                        }
                    })
                })
            }
        }
    }
}
</script>

<style lang="scss">
    .layout {
        background: #999;
        height: 500px;
    }
    .hoverStyle {
        border: 1px solid #999;
        // &:hover {
        //     border: 1px solid blue;
        // }
    }
</style>
风铭大师
关注
  • 11
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-grid-layout：Vue.js的可拖动和可调整大小的网格布局
02-06
Vue网格布局 什么是Vue网格布局？ vue-grid-layout是的网格布局系统，例如 。 受极大启发 产品特点 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或删除小部件 布局可以序列化和还原 自动RTL支持（调整大小无法在2.2.0上使用RTL） React灵敏 当前版本： 2.3.12（支持Vue 2.2+） 对于IE11等旧版浏览器，请使用版本 对于Vue 2.1.10及以下版本，请使用版 对于Vue 1，请使用版 文献资料 查看 使用vue-grid-layout的项目 认识别人吗？ 建立公关让我知道！ 有助于 如
react-layout:该项目是 react.JS 最佳布局
05-31
React布局 该项目是 react.JS 最佳布局。 如何使用项目文件、布局、设计等。
【Android】使用网格布局根据特定的需求设置不同数量的单元格并设置单独的点击事件
最新发布
2301_77119065的博客
06-16 297
通过以上步骤，您可以根据需要在Android应用程序中创建一个带有指定数量单元格的网格布局，并为每个单元格设置不同的点击事件。这种方法允许您根据具体的设计和功能要求来定制网格布局，并实现与用户交互相关的动作。希望本篇博客对您有所帮助，如有任何问题或进一步的需求，请随时提出！
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
热门推荐
~朴：shu的博客
11-22 3万+
在具有拖拽组成页面、组件动态调整大小、边缘碰撞监测的系统中，使用该布局无疑是最合适的。该栅格系统目前对 vue2 的支持是最好的，vue3 是需要用插件支持的，会在小节详细讲解。栅格布局难度不大，但是要理解里面的原理，并实际应用到自己的项目开发，还要结合自己项目的实际情况。
拖拽宫格vue-grid-layout详细应用及案例
鹏多多的博客
08-07 3945
vue-grid-layout是一个适用于vue的拖拽栅格布局库，功能齐全，适用于拖拽+高度/宽度自由调节的布局需求，本文将讲述一些常用参数和事件，以及做一个同步拖拽的Demo。
Vue Grid Layout - 适用Vue.js的栅格布局系统（项目实例）
~朴：shu的博客
02-24 8766
Vue-Grid-Layout 基于Vue.js 的栅格布局系统，在拖拽布局的项目中可以借鉴一下；本文做项目实例，望参考，有问题欢迎留言讨论。
前端开发之vue-grid-layout的使用和实例
m0_50207524的博客
06-02 1万+
vue-grid-layout的使用、实例、遇到的问题和解决方案
使用Vue-Grid-Layout实现自定义工作台
02-01
Vue-Grid-Layout 是一个基于 Vue.js 的响应式栅格布局系统，它允许开发者创建自定义的工作台，用户可以根据需要自由调整各个组件的位置和大小。在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作...
v-grid-layout：网格布局
02-15
v-grid-layout是Vue的网格布局系统，例如 。 这是的裸分支，它支持将GridItem嵌套在任何其他组件中 [| | ] 特征 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的...
vue-responsive-grid-layout:Vue Repsonsive网格布局
05-17
VueResponsiveGridLayout 1.2.0 VueJS的响应式可拖动和可调整大小的网格布局。... import {VueResponsiveGridLayout, VueGridItem, VueGridLayout } from 'vue-responsive-grid-layout' Vue.component
Vue-grid-layout官方文档
03-11
1.详细介绍了Vue-Gird-layout的使用及API
vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统
zhang_zan
02-28 2573
vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统
Vue Grid Layout
weixin_41897680的博客
07-27 3540
vue grid layout
Vue Grid Layout ( 栅格布局 )
i_Satan的博客
01-11 1662
Vue Grid Layout -️ 适用 Vue.js 的栅格布局系统 (相关使用记录) 参考文章@~朴：shu 参考文章@我说爱你啊 中文文档 安装 npm install vue-grid-layout --save 或 yarn add vue-grid-layout 导入组件 import VueGridLayout from 'vue-grid-layout'; 注册组件 export default { components: { GridL
基于vue3和vue-grid-layout实现自定义布局和动态渲染组件
bingjilingvsh2o的专栏
07-19 5585
安装vue-grid-layout的3.0.0-beta1版本，执行命令：npm install vue-grid-layout@3.0.0-beta1。
vue-grid-layout数据可视化图表面板优化过程所遇问题汇总
周陆军的博客，分享it技术。
01-25 2158
此文为数据可视化vue-grid-layout拖曳布局实践总结，在实现过程中的一些避坑点
使用 vue-grid-layout + echart 实现图形可拖拽式布局+自适应大小
lvyilv的博客
05-01 6653
学习目标： 实现 echart 表在网页中的可拖拽式布局+自适应大小 学习内容： 安装 vue-grid-layout 安装 echart 编写可拖拽且可改变大小的 vue-grid-layout 组件 编写一个 echart 折线图组件 设置 echart 自适应大小 一、安装 echart 切到 vue-cli 目录下执行一下命令 npm install vue-grid-layout --save 此命令将为为你在本项目下安装 vue-grid-layout 编写放置 vue-gri
vue项目中vue-grid-layout使用简介
qq_26887683的博客
02-03 2291
vue项目中vue-grid-layout使用简介
vue-grid-layout组件使用
03-16
Vue-grid-layout是一个基于Vue.js的可拖拽和可调整大小的网格布局组件。它可以帮助开发者快速构建响应式的网格布局，支持多种布局方式和自定义样式。 使用Vue-grid-layout组件，需要先安装依赖包： ``` npm ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值