大家好，欢迎来到IT知识分享网。

#头条创作挑战赛#

今天给大家分享一个超优秀的 vue.js 拖拽栅格布局插件VueGridLayout。

vue-grid-layout 一款基于 vue 可拖拽缩放的栅格组件。star高达5.9K+。

功能性

• 可拖拽
• 可调整大小
• 静态部件（不可拖拽、调整大小）
• 拖拽和调整大小进行边界检查
• 增减部件时避免重建栅格
• 可序列化和还原的布局
• 自动化 RTL 支持
• 响应式

安装

npm install vue-grid-layout -D

引入使用

import VueGridLayout from 'vue-grid-layout';

export default { components: { GridLayout: VueGridLayout.GridLayout, GridItem: VueGridLayout.GridItem }, // ... data, methods, mounted (), etc. }

<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :is-mirrored="false" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" > <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"> {{item.i}} </grid-item> </grid-layout>

非常不错的一款拖拽瓷片组件，有需要的小伙伴可以去看下哈。

# 文档地址

https://jbaysolutions.github.io/vue-grid-layout/

# 仓库地址

https://github.com/jbaysolutions/vue-grid-layout

ok，今天的分享就到这里。