feat: add 3 resize examples (#4907)

playground/src/views/examples/resize/basic.vue

@@ -3,42 +3,56 @@ import { ref } from 'vue';
 
 import { Page, VResize } from '@vben/common-ui';
 
-const width = ref(200);
+const colorMap = ['red', 'green', 'yellow', 'gray'];
-const height = ref(200);
-const top = ref(200);
-const left = ref(200);
 
-const resize = (newRect: {
+type TSize = {
   height: number;
   left: number;
   top: number;
   width: number;
-}) => {
+};
-  width.value = newRect.width;
+
-  height.value = newRect.height;
+const sizeList = ref<TSize[]>([
-  top.value = newRect.top;
+  { height: 200, left: 200, top: 200, width: 200 },
-  left.value = newRect.left;
+  { height: 300, left: 300, top: 300, width: 300 },
+  { height: 400, left: 400, top: 400, width: 400 },
+  { height: 500, left: 500, top: 500, width: 500 },
+]);
+
+const resize = (size?: TSize, rect?: TSize) => {
+  if (!size || !rect) return;
+
+  size.height = rect.height;
+  size.left = rect.left;
+  size.top = rect.top;
+  size.width = rect.width;
 };
 </script>
 
 <template>
   <Page description="Resize组件基础示例" title="Resize组件">
     <div class="m-4 bg-blue-500 p-48 text-xl">
-      {{
+      <div v-for="size in sizeList" :key="size.width">
-        `width: ${width}px, height: ${height}px, top: ${top}px, left: ${left}px`
+        {{
-      }}
+          `width: ${size.width}px, height: ${size.height}px, top: ${size.top}px, left: ${size.left}px`
+        }}
+      </div>
     </div>
 
-    <VResize
+    <template v-for="(_, idx) of 4" :key="idx">
-      :h="200"
+      <VResize
-      :is-active="true"
+        :h="100 * (idx + 1)"
-      :w="200"
+        :w="100 * (idx + 1)"
-      :x="200"
+        :x="100 * (idx + 1)"
-      :y="200"
+        :y="100 * (idx + 1)"
-      @dragging="resize"
+        @dragging="(rect) => resize(sizeList[idx], rect)"
-      @resizing="resize"
+        @resizing="(rect) => resize(sizeList[idx], rect)"
-    >
+      >
-      <div class="h-full w-full bg-red-500"></div>
+        <div
-    </VResize>
+          :style="{ backgroundColor: colorMap[idx] }"
+          class="h-full w-full"
+        ></div>
+      </VResize>
+    </template>
   </Page>
 </template>