| | |
|---|
| | | <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> |
|---|
| | | 111 |
|---|
| | | <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> |
|---|
