大学生创意电子产品设计,电子商务seo,广告策划书格式,外贸营销模式文章目录 1、官网简介2、在vue3中使用1)、需要导入vue3支持的版本插件2)、在mian.js里引入#xff1a;3)、在组件中使用 3、layout布局的计算逻辑4、 gridLayout 的属性 该栅格系统目前对 vue2 的支持是最好的#xff0c;vue3 是需要用插件支持的#xff0c;会在小节详细讲解… 文章目录 1、官网简介2、在vue3中使用1)、需要导入vue3支持的版本插件2)、在mian.js里引入3)、在组件中使用 3、layout布局的计算逻辑4、 gridLayout 的属性 该栅格系统目前对 vue2 的支持是最好的vue3 是需要用插件支持的会在小节详细讲解。 1、官网简介
官网地址https://madewithvuejs.com/vue-grid-layout 中文文档https://github.com/jbaysolutions/vue-grid-layout/blob/master/README-zh_CN.md
该栅格布局有以下特点
可拖拽可调整大小静态部件不可拖拽、调整大小拖拽和调整大小时进行边界检查增减部件时避免重建栅格可序列化和还原的布局自动化RTL支持响应式Min/max w/h per item
2、在vue3中使用
1)、需要导入vue3支持的版本插件
pnpm add vue-grid-layout3.0.0-beta1
// 安装结果
vue-grid-layout: 3.0.0-beta12)、在mian.js里引入
import gridLayout from vue-grid-layout
app.use(gridLayout)注在main.js注册后在具体使用的组件中不需要在 import 引入可直接使用App.vue 因为vue-grid-layout是vue2版本的 但自己用的是vue3版本所以要安装vue3的依赖和相关配置
3)、在组件中使用
templategrid-layoutv-model:layoutlayout:col-num24:row-height30:is-draggabletrue:is-resizabletrue:is-mirroredfalse:vertical-compacttrue:margin[10, 10]:use-css-transformstruegrid-itemv-foritem in layout:keyitem.i:xitem.x:yitem.y:witem.w:hitem.h:iitem.i:staticitem.staticMyTasksv-ifitem.name 我的模块1:iditem.ideletePanelItemEventdeletePanelItem/MyDatav-ifitem.name 我的模块2:iditem.ideletePanelItemEventdeletePanelItem/MyModelv-ifitem.name 我的模块3:iditem.ideletePanelItemEventdeletePanelItem/ModelRunv-ifitem.name 我的模块4:iditem.ideletePanelItemEventdeletePanelItem//grid-item/grid-layout
/templatescript setup
import { reactive } from vue;const layout [{ x: 0, y: 0, w: 12, h: 8, i: 0, name: 我的模块1, static: true,},{ x: 12, y: 0, w: 12, h: 8, i: 1, name: 我的模块2 },{ x: 0, y: 8, w: 12, h: 8, i: 2, name: 我的模块3 },{ x: 12, y: 8, w: 12, h: 8, i: 3, name: 我的模块4 },
]
/scriptstyle
* {margin: 0;padding: 0;box-sizing: border-box;
}
/style3、layout布局的计算逻辑
这是gridItem的数据项{ “x”: 0, “y”: 0, “w”: 2, “h”: 2, “i”: “0” },包含x、y、w、h、i。 i: 栅格中元素的IDx: 标识栅格元素位于第几列y: 标识栅格元素位于第几行w: 标识栅格元素的初始宽度值为colWidth的倍数h: 标识栅格元素的初始高度值为rowHeight的倍数 理解基本概念后详细说说参数含义只取第一个数据项{ “x”: 0, “y”: 0, “w”: 2, “h”: 2, “i”: “0” }minW栅格元素的最小宽度值为colWidth的倍数minH:栅格元素的最小高度(值为rowHeight的倍数)maxW栅格元素的最大宽度(值为colWidth的倍数)maxH栅格元素的最大高度值为rowHeight的倍数 宽度设共可分为 n 列那么 width - (n1)*margin / n 每个元素的实际宽度 高度设共可分为 m 行那么row-height * m (m 1) * margin height 因此元素的宽高可以根据实际的拖拽区的宽高动态计算出来 4、 gridLayout 的属性 layout:栅格布局的数据源数据源为数组Array数据项为对象必须包含 i, x, y, w 和 h 属性.colNum定义栅格系统的列数rowHeight每行的高度单位像素maxRows定义最大行数isDraggable标识栅格中的元素是否可拖拽isResizable标识栅格中的元素是否可调整大小preventCollision防止碰撞属性值设置为ture时栅格只能拖动至空白处 (我们将数据项宽度高度设为1便于查看效果)
colNum是定义列数
rowHeight:是指每一行的高度这个的单位是 px
margin:定义栅格中的元素边距(数组中第一个元素表示水平边距第二个表示垂直边距单位为像素)
其他属性就比较简单了不再大篇幅介绍了后面遇到了我们再细说。主要大家一定要了解计算规则这个框架就非常容易掌握了遇到BUG基本上是margin的问题。
