https://github.com/xhlife/vue3-grid-layout
About A draggable and resizable grid layout, for Vue3.
https://github.com/xhlife/vue3-grid-layout
drag-drop grid resize vue3 vue3-typescript
Last synced: about 1 year ago
JSON representation
About A draggable and resizable grid layout, for Vue3.
- Host: GitHub
- URL: https://github.com/xhlife/vue3-grid-layout
- Owner: xhlife
- License: mit
- Created: 2021-12-07T14:50:07.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-23T11:40:49.000Z (over 2 years ago)
- Last Synced: 2024-04-23T15:02:47.545Z (about 2 years ago)
- Topics: drag-drop, grid, resize, vue3, vue3-typescript
- Language: Vue
- Homepage: https://github.com/xhlife/vue3-grid-layout
- Size: 480 KB
- Stars: 80
- Watchers: 6
- Forks: 22
- Open Issues: 14
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Support By
This project js support by [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout), but vue-grid-layout do not support vue3.
# Vue 3 + TypeScript + Vite
The template uses Vue 3 `` SFCs, so pay attention to the version of vue.
## Supports Vue 3.2+
# Usage
```shell
npm i vue3-grid-layout-next
```
<h2>
<a href="https://jbaysolutions.github.io/vue-grid-layout/" target="_blank">Documentation Website</a>
</h2>
## add Scoped slot
```html
<grid-item v-slot="{style}">
<div>
<!-- get attribute, such as width,height, and so no -->
{{ style }}
</div>
</grid-item>
```
## add dragging、 dragend event
```html
<grid-item
@dragging="doSomething"
@dragend="doSomethingEnd"
>
</grid-item>
<script lang="ts" setup>
function doSomethin(event: MouseEvent, i: number | string) {
}
```
## beware
### Usage with v-model
```html
...
```
### Use ref object
If the responsive property is true, make sure layout is a ref object
```html
const responsive = ref(true)
const layout = ref([])
// const layout = reactive([]) // will cause some bug
// it will work, when responsive is false
// const layout = reactive([])
...
```
# example
[demo for echart](https://cxid.gitee.io/works/work/vue3-grid-layout/index.html) - [source：https://gitee.com/cxid/vue3-grid-layout-demo](https://gitee.com/cxid/vue3-grid-layout-demo)