vue3-drr-grid-layout 单元格调整大小

在vue3-drr-grid-layout中我们可以通过is-resizable属性设置为true允许用户缩放单元格的大小，并通过resize和resized事件来获取单元格是否进行了缩放。

缩放属性

<!-- 设置true允许缩放全部单元格大小 -->
<grid-layout :is-resizable="true"></grid-layout>
<!-- 设置true允许缩放制定单元格大小 -->
<grid-item :is-resizable="true"></grid-item>

缩放事件

<!-- resize缩放中 resized缩放完成 -->
<grid-item @resize="resizeEvent" @resized="resizedEvent"> </grid-item>

在线试一试

完整代码

<template>
  <div>{{ message }}</div>
  <div id="content" style="width: 50%">
    <grid-layout
      v-model:layout="layout"
      :col-num="6"
      :row-height="30"
      :margin="[10, 10]"
      style="padding: 10px"
    >
      <template #default="{ gridItemProps }">
        <grid-item
          v-for="item in layout"
          :key="item.i"
          v-bind="gridItemProps"
          :is-resizable="0 == item.i"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :auto-size="false"
          class="item"
          @resize="resizeEvent"
          @resized="resizedEvent"
        >
          <div>
            <span
              class="span" 
              >{{ item.i == 0 ? "可以缩放" : "不能缩放" }}</span
            >
          </div>
        </grid-item>
      </template>
    </grid-layout>
  </div>
</template>
<script setup lang="ts">
/*
 vue3-drr-grid-layout 中文文档
 https://www.itxst.com/vue3-drr-grid-layout/tutorial.html
*/
import { getCurrentInstance, onMounted, 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 isDraggable = ref(false);

//单元格缩放中的事件
const resizeEvent = (i, newH, newW, newHPx, newWPx) => {
  message.value = "缩放中 i=" + i + ", X=" + newHPx + ", Y=" + newWPx;
};
//单元格缩放完成的事件
const resizedEvent = (i, newH, newW, newHPx, newWPx) => {
  message.value = "缩放完成 i=" + i + ", X=" + newHPx + ", Y=" + newWPx;
};
</script>
<style scoped>
.droppable-element {
  width: 120px;
  text-align: center;
  background: #fdd;
  border: 1px solid black;
  margin: 10px 0;
  padding: 10px;
}

.item {
  display: flex;
  justify-content: space-between;
}

.item .span {
  padding: 10px;
  border: solid 1px #ddd;
  background-color: rgb(171, 171, 171);
  color: #000;
  font-size: 11px;
}
</style>