by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add 3 resize examples (#4907)

Browse Source
This commit is contained in:
Arthur Darkstone 2024-11-17 21:01:32 +08:00 committed by GitHub
parent 1302092798
commit 77083abcc5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
playground/src/views/examples/resize/basic.vue
View File

@ -3,42 +3,56 @@ import { ref } from 'vue';
import { Page, VResize } from '@vben/common-ui'; 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; height: number;
left: number; left: number;
top: number; top: number;
width: 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> </script>
<template> <template>
<Page description="Resize组件基础示例" title="Resize组件"> <Page description="Resize组件基础示例" title="Resize组件">
<div class="m-4 bg-blue-500 p-48 text-xl"> <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>
</div>
<template v-for="(_, idx) of 4" :key="idx">
<VResize <VResize
:h="200" :h="100 * (idx + 1)"
:is-active="true" :w="100 * (idx + 1)"
:w="200" :x="100 * (idx + 1)"
:x="200" :y="100 * (idx + 1)"
:y="200" @dragging="(rect) => resize(sizeList[idx], rect)"
@dragging="resize" @resizing="(rect) => resize(sizeList[idx], rect)"
@resizing="resize"
> >
<div class="h-full w-full bg-red-500"></div> <div
:style="{ backgroundColor: colorMap[idx] }"
class="h-full w-full"
></div>
</VResize> </VResize>
</template>
</Page> </Page>
</template> </template>