515fceeb
 “wangming”
框架初始化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<script lang="ts" setup>
import { ref } from 'vue';
import { Page, VResize } from '@vben/common-ui';
const colorMap = ['red', 'green', 'yellow', 'gray'];
type TSize = {
height: number;
left: number;
top: number;
width: number;
};
const sizeList = ref<TSize[]>([
{ height: 200, left: 200, top: 200, width: 200 },
{ 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: ${size.width}px, height: ${size.height}px, top: ${size.top}px, left: ${size.left}px`
}}
</div>
</div>
<template v-for="(_, idx) of 4" :key="idx">
<VResize
:h="100 * (idx + 1)"
:w="100 * (idx + 1)"
:x="100 * (idx + 1)"
:y="100 * (idx + 1)"
@dragging="(rect) => resize(sizeList[idx], rect)"
@resizing="(rect) => resize(sizeList[idx], rect)"
>
<div
:style="{ backgroundColor: colorMap[idx] }"
class="h-full w-full"
></div>
</VResize>
</template>
</Page>
</template>
|
