| | |
|---|
| | | import {ref} from "vue"; |
|---|
| | | |
|---|
| | | const layout=ref([ |
|---|
| | | {"x":0,"y":0,"w":2,"h":2,"i":"0"}, |
|---|
| | | {"x":2,"y":0,"w":2,"h":4,"i":"1"}, |
|---|
| | | {"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":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"} |
|---|
| | | {"x":2,"y":6,"w":2,"h":2,"i":"19"}*/ |
|---|
| | | ]) |
|---|
| | | |
|---|
| | | const layoutUpdated = (newLayout) => { |
|---|
| | |
|---|
| | | |
|---|
| | | <template> |
|---|
| | | <grid-layout |
|---|
| | | style="border:1px solid black;height: 100%;width: 100%;overflow: hidden;" |
|---|
| | | style="border:1px solid black;height: 244px;width: 366px;overflow: hidden;grid-template-columns: 1px" |
|---|
| | | :layout.sync="layout" |
|---|
| | | :col-num="12" |
|---|
| | | :row-height="30" |
|---|
| | | :col-num="366" |
|---|
| | | :row-height="1" |
|---|
| | | :is-draggable="true" |
|---|
| | | :is-resizable="false" |
|---|
| | | :is-mirrored="false" |
|---|
| | | :vertical-compact="true" |
|---|
| | | :margin="[2, 2]" |
|---|
| | | :margin="[0, 0]" |
|---|
| | | :use-css-transforms="true" |
|---|
| | | :autoSize="false" |
|---|
| | | @layout-updated="layoutUpdated" |
|---|
