龙空技术网

基于 Vue.js 磁片栅格布局组件VueGridLayout

web前端进阶 3296

前言:

眼前你们对“js拖拽插件”大约比较关怀,各位老铁们都需要学习一些“js拖拽插件”的相关知识。那么小编也在网摘上搜集了一些关于“js拖拽插件””的相关文章,希望我们能喜欢,各位老铁们快快来了解一下吧!

#头条创作挑战赛#

今天给大家分享一个超优秀的 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>

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

# 文档地址

# 仓库地址

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

标签: #js拖拽插件