vue3-drr-grid-layout 事件列表

vue3-drr-grid-layout 的 grid-layout和grid-item的组件完整的事件列表以及使用方法。

事件列表

<template>
  <div>{{ message }}</div>
  <grid-layout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    style="width: 100vw"
    @layout-mounted="onMountedEvent"
    @layout-created="createdEvent"
    @layout-before-mount="beforeMountEvent"
    @layout-ready="readyEvent"
    @layout-updated="updatedEvent"
    @breakpoint-changed="breakpointChangedEvent"
  >
    <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"
        @container-resized="containerResizedEvent"
      >
        <div class="item">
          <label>{{ item.i }}</label
          ><span @click="del(item.i)">删除x</span>
        </div>
      </grid-item>
    </template>
  </grid-layout>
</template>

<script setup lang="ts">
/*
 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 del = (i: any) => {
  layout.value = layout.value.filter((a) => a.i != i);
};
//****************** GridLayout 事件 ************************
//对应Vue生命周期的created
const createdEvent = (newLayout: any) => {
  console.log("Created layout: ", newLayout);
};
//对应Vue生命周期的beforeMount
const beforeMountEvent = (newLayout: any) => {
  console.log("beforeMount layout: ", newLayout);
};

//对应Vue生命周期的mounted
const onMountedEvent = (newLayout: any) => {
  console.log("Mounted layout: ", newLayout);
};

//当完成mount中的所有操作时生成的事件
const readyEvent = (newLayout: any) => {
  console.log("Ready layout: ", newLayout);
};

//更新事件（布局更新或栅格元素的位置重新计算）
const updatedEvent = (newLayout: any) => {
  console.log("Updated layout: ", newLayout);
};

//每次断点值由于窗口调整大小而改变
const breakpointChangedEvent = (newBreakpoint: any, newLayout: any) => {
  console.log("断点=", newBreakpoint, ", layout: ", newLayout);
};

const containerResizedEvent = (item: any) => {
  //  i: number // grid item index
  //  h: number // grid item height from propss
  //  w: number // grid item width from props
  //  height: number // grid item height
  //  width: number // grid item width
  console.log("容器大小改变了  " + item);
};
//****************** GridItem 事件 ************************
//单元格缩放事件
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>

<style scoped>
.item {
  display: flex;
  justify-content: space-between;
}
.item > span {
  margin-left: 10px;
  padding: 1px;
  border: solid 1px #ddd;
  cursor: pointer;
  background-color: rgb(171, 171, 171);
  color: #000;
  font-size: 11px;
}
</style>

在线试一试