vue3-grid-layout
vue3-grid-layout copied to clipboard
Using grid-item wrapped in a component does not work
Hey, I tried to extract the grid item to a component to make it fully customized. But when I try to use it, the grid item is not working
GridLayout component
<template>
<grid-layout
v-model:layout="props.layout"
:col-num="options.colNum"
:row-height="options.rowNum"
:is-draggable="options.isDraggable"
:is-resizable="options.isResizable"
:responsive="options.responsive"
:vertical-compact="options.verticalCompact"
:prevent-collision="options.preventCollision"
:use-css-transforms="options.useCssTransform"
>
<CustomGridItem v-for="item in layout" :item="item"></CustomGridItem>
</grid-layout>
</template>
<script setup lang="ts">
import CustomGridItem from '@/components/molecules/custom-grid-item/CustomGridItem.vue'
import { GridLayout } from 'vue3-grid-layout-next'
import type { Layout } from 'vue3-grid-layout-next/dist/helpers/utils'
interface FolderGridLayoutProps {
layout: Layout
}
const props = defineProps<FolderGridLayoutProps>()
const options = {
colNum: 30,
rowNum: 30,
isDraggable: true,
isResizable: true,
responsive: true,
verticalCompact: false,
preventCollision: true,
useCssTransform: true,
}
</script>
Custom Grid Item component
<template>
<grid-item
:static="item.static"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
<span class="text">{{ item.i }}</span>
</grid-item>
</template>
<script setup lang="ts">
import { GridItem } from 'vue3-grid-layout-next'
import { LayoutItem } from 'vue3-grid-layout-next/dist/helpers/utils'
interface CustomGridItemProps {
item: LayoutItem
}
defineProps<CustomGridItemProps>()
</script>
As a result, item are displayed in a way that we can't use them, size are not the right ones... Here is a screenshot of the result, any idea on how to solve this ?
While using the grid-item component directly in the grid layout, the result looks like this (working like expected) :