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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <script setup>
| import {ref} from "vue";
|
| const layout=ref([
| {"x":0,"y":0,"w":50,"h":50,"i":"0"},
| /*{"x":2,"y":0,"w":2,"h":4,"i":"1"},
| {"x":4,"y":0,"w":2,"h":5,"i":"2"},
| {"x":6,"y":0,"w":2,"h":3,"i":"3"},
| {"x":8,"y":0,"w":2,"h":3,"i":"4"},
| {"x":10,"y":0,"w":2,"h":3,"i":"5"},
| {"x":0,"y":5,"w":2,"h":5,"i":"6"},
| {"x":2,"y":5,"w":2,"h":5,"i":"7"},
| {"x":4,"y":5,"w":2,"h":5,"i":"8"},
| {"x":6,"y":3,"w":2,"h":4,"i":"9"},
| {"x":8,"y":4,"w":2,"h":4,"i":"10"},
| {"x":10,"y":4,"w":2,"h":4,"i":"11"},
| {"x":0,"y":10,"w":2,"h":5,"i":"12"},
| {"x":2,"y":10,"w":2,"h":5,"i":"13"},
| {"x":4,"y":8,"w":2,"h":4,"i":"14"},
| {"x":6,"y":8,"w":2,"h":4,"i":"15"},
| {"x":8,"y":10,"w":2,"h":5,"i":"16"},
| {"x":10,"y":4,"w":2,"h":2,"i":"17"},
| {"x":0,"y":9,"w":2,"h":3,"i":"18"},
| {"x":2,"y":6,"w":2,"h":2,"i":"19"}*/
| ])
|
| const layoutUpdated = (newLayout) => {
| //checkLayoutBounds(newLayout)
| }
| const checkLayoutBounds = (layout1) => {
| layout1.forEach(item => {
| // 检查边界，例如确保x和y不小于0，并且w和h不超出最大值等。
| if (item.x < 0) item.x = 0;
| if (item.y < 0) item.y = 0;
| if (item.w > 12) item.w = 12; // 假设最大列数为12
| if (item.h > 10) item.h = 10; // 假设最大行为10（根据需要调整）
| });
| layout.value = layout1; // 应用边界检查后的布局
| console.log(layout1)
| }
| const moveEvent = (i, newX, newY) => {
| console.log(`移动元素 ${i} 到 (${newX}, ${newY})`)
| }
|
| </script>
|
| <template>
| <grid-layout
| style="border:1px solid black;height: 244px;width: 366px;overflow: hidden;grid-template-columns: 1px"
| :layout.sync="layout"
| :col-num="366"
| :row-height="1"
| :is-draggable="true"
| :is-resizable="false"
| :is-mirrored="false"
| :vertical-compact="true"
| :margin="[0, 0]"
| :use-css-transforms="true"
| :autoSize="false"
| @layout-updated="layoutUpdated"
| >
|
| <grid-item v-for="item in layout"
| :x="item.x"
| :y="item.y"
| :w="item.w"
| :h="item.h"
| :i="item.i"
| :key="item.i"
| @move="moveEvent"
| style="background-color: white"
| >
| {{item.i}}
| </grid-item>
| </grid-layout>
| </template>
|
| <style scoped>
|
| </style>
|
|
