1.0.0 • Published 8 months ago
@aimee00/vue-grid-layout-3 v1.0.0
Support By
This project js support by vue-grid-layout
Vue 3 + TypeScript + Vite
The template uses Vue 3 <script setup>
SFCs, so pay attention to the version of vue.
Supports Vue 3.2+
Usage
npm i vue3-grid-layout-next
add Scoped slot
<grid-item v-slot="{style}">
<div>
<!-- get attribute, such as width,height, and so no -->
{{ style }}
</div>
</grid-item>
add dragging、 dragend event
<grid-item
@dragging="doSomething"
@dragend="doSomethingEnd"
>
</grid-item>
<script lang="ts" setup>
function doSomethin(event: MouseEvent, i: number | string) {
}
</script>
beware
Usage with v-model
<GridLayout v-model:layout="layout">
...
</GridLayout>
Use ref object
If the responsive property is true, make sure layout is a ref object
<script lang="ts" setup>
const responsive = ref(true)
const layout = ref([])
// const layout = reactive([]) // will cause some bug
// it will work, when responsive is false
// const layout = reactive([])
</script>
<template>
<div class="layout">
<GridLayout v-model:layout="layout" :responsive="responsive" >
...
</GridLayout>
</div>
</template>
example
demo for echart - source:https://gitee.com/cxid/vue3-grid-layout-demo
1.0.0
8 months ago