vue3-drr-grid-layout 中文文档

vue3-drr-grid-layout 是 gridster.js 的 vue3 版本的网格布局插件，可以实现单元格的拖拽排序和布局，通常我们可以用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属性说明

grid-item属性说明