阿毛Alex - 2021年8月7日
type: channel
link: https://alexmao.com/index.php/2021/08/07/
description: 生命不息，折腾不止
items: 一个完整的vue-grid-layout文件
items: vue-grid-layout的参数详解

一个完整的vue-grid-layout文件
type: item
date: 2021-08-07T15:53:09+00:00
description: 经过对比，我把里面几个sample整合到了一个文件里，包括：部分元素可拖拽预定义的可拖拽布局以下是完整代码： Displayed as [x, y, w, h]: {{ item.i }}: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}] Draggable Resizable Responsive {{ item.i }} 创建文档

vue-grid-layout的参数详解
type: item
date: 2021-08-07T15:50:09+00:00
description: 前人栽树，后人乘凉。以下是vue-grid-layout的参数详解，转载自一个柯子非常感谢总结，解决了我responsive部分的问题。<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中注册一下 不然会导致不能拖拽 或者 不能放大缩小 // for循环 便利数组中的内容 渲染元素 // // {{item.i}} // </grid-layout> ​ 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 选择器 项的哪些元素应触发项的拖动事件 // 文档这样写的 resizeIgnoreF…