vue3-drr-grid-layout 中文文档

vue3-drr-grid-layoutgridster.jsvue3 版本的网格布局插件,可以实现单元格的拖拽排序和布局,通常我们可以用vue3-drr-grid-layout来实现自定义工作台、看板这类功能。

官方网站

https://github.com/melrose13-69/vue3-dragable-grid-layout

安装方式

npm i vue3-drr-grid-layout

Demo下载

打开 demo 后运行 npm i 下载文件

导入组件

import { GridLayout,GridItem } from "vue3-drr-grid-layout";
import "vue3-drr-grid-layout/dist/style.css";

代码示例

<template>
  <div>{{ message }}</div>
  <grid-layout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    style="width: 100vw">
  <template #default="{ gridItemProps }"> 
        <grid-item
          v-for="item in layout"
          :key="item.i"
          v-bind="gridItemProps"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          @resize="resize"
          @move="move"
          @moved="moved"
        >
          {{ item.i }}
        </grid-item>
        </template>
  </grid-layout>
</template>

<script setup>
/*
 vue3-drr-grid-layout 中文文档
 https://www.itxst.com/vue3-drr-grid-layout/tutorial.html
*/
import { ref } from "vue";
import { GridLayout,GridItem } from "vue3-drr-grid-layout";
import "vue3-drr-grid-layout/dist/style.css";

const layout = ref([
  { x: 0, y: 0, w: 2, h: 2, i: 0 },
  { x: 2, y: 0, w: 2, h: 2, i: 1 },
  { x: 4, y: 0, w: 2, h: 2, i: 2 },
  { x: 0, y: 1, w: 6, h: 2, i: 3 }, 
]);

const message = ref("");
//缩放事件
const resize= (i: number, newH: number, newW: number,newHPx: number, newWPx: number)=> {
  message.value  = "缩放中 i=" + i + ", X=" + newHPx + ", Y=" + newWPx;
            }
//单元格移动中的事件
const move = (i: number, newX: number, newY: number) => {
  message.value = "移动中 i=" + i + ", X=" + newX + ", Y=" + newY;
};
//单元格移动后的事件
const moved = (i: number, newX: number, newY: number) => {
  message.value = "移动中 i=" + i + ", X=" + newX + ", Y=" + newY;
};
</script>

在线试一试

grid-layout属性说明

属性名称属性说明
col-num网格容器占几列,默认12列
row-height每行的高度,默认150px
is-draggable是否允许拖拽容器中的单元格,默认true
is-resizable是否允许缩放容器中的单元格,默认true
max-rows定义最大行数
margin容器中单元格之间的间距,如果[10,10]
responsive是否是响应式布局,比如大屏下显示12列,小屏幕下将会根据屏幕大小显示多少列。默认为false
is-mirrored镜像反转,就是布局是从左到右还是从右到左
auto-size容器是否自动自动大小
vertical-compact是否开启垂直压缩,设置true或false试试看
prevent-collision防止碰撞,设置为ture时,单元格只能拖动到空白处
use-css-transforms否使用CSS属性 transition-property: transform
breakpoints为响应式布局设置断点,默认为 { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },里面的单位为像素px
cols设置每个断点对应的列数,默认{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }。
use-style-cursor是否使用动态鼠标指针样式,当拖动出现卡顿时,将此值设为 false也许可以缓解布局问题。

grid-item属性说明

属性名称属性说明
i单元格的id,字符串类型
x单元格起始列
y单元格起始行
w单元格占几列
h单元格占几行
min-w单元格最小宽度占几列,缩放单元格时起作用
min-h单元格最小宽度占几行,缩放单元格时起作用
max-w单元格最大宽度占几列,缩放单元格时起作用
max-h单元格最大宽度占几行,缩放单元格时起作用
is-draggable单元格是否允许拖拽,如果为 null 取决父容器
is-resizable单元格是否允许缩放,如果为 null 取决父容器
static单元格是否是静态的,默认为false,如果是那么无法缩放、拖动、被其他元素影响
drag-ignore-fromcss 筛选器,设置那些元素无法触发拖拽事件,比如'a, button'
drag-allow-fromcss 筛选器,那些元素可以触发拖拽事件,默认为null,全部元素
resize-ignore-fromcss 筛选器,那些元素无法触发调整大小事件