文章目录
- 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-layout@3.0.0-beta1
// 安装结果
"vue-grid-layout": "3.0.0-beta1"
2)、在mian.js里引入:
import gridLayout from 'vue-grid-layout'
app.use(gridLayout)
注:在main.js注册后,在具体使用的组件中不需要在 import 引入,可直接使用(App.vue)
因为vue-grid-layout是vue2版本的 但自己用的是vue3版本,所以要安装vue3的依赖和相关配置
3)、在组件中使用
<template>
<grid-layout
v-model:layout="layout"
:col-num="24"
: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"
:key="item.i"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:static="item.static"
>
<MyTasks
v-if="item.name === '我的模块1'"
:id="item.i"
@deletePanelItemEvent="deletePanelItem"
/>
<MyData
v-if="item.name === '我的模块2'"
:id="item.i"
@deletePanelItemEvent="deletePanelItem"
/>
<MyModel
v-if="item.name === '我的模块3'"
:id="item.i"
@deletePanelItemEvent="deletePanelItem"
/>
<ModelRun
v-if="item.name === '我的模块4'"
:id="item.i"
@deletePanelItemEvent="deletePanelItem"
/>
</grid-item>
</grid-layout>
</template>
<script 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' },
]
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
3、layout布局的计算逻辑
这是gridItem的数据项:{ “x”: 0, “y”: 0, “w”: 2, “h”: 2, “i”: “0” },包含x、y、w、h、i。
- i: 栅格中元素的ID
- x: 标识栅格元素位于第几列
- 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 - (n+1)*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的问题。