Vue3.0实现拖拽布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3.0实现拖拽布局相关的知识，希望对你有一定的参考价值。
参考技术A 首先，我们选择的插件是vue-grid-layout官网： https://jbaysolutions.github.io/vue-grid-layout/zh/guide/properties.html#gridlayout
安装完依赖，发现项目能启动起来，按照官网demo发现页面空白，控制台提示没有找到子组件
改变思路，不使用局部引入组件，使用全局引入组件。
效果：
但是！！
这里拖拽完没有判断每一行是否填充满且拖拽后有模块会被覆盖导致出现空白区域，如下：
我们需要增加校验，校验每一行是否填充满
1.校验函数
思路的话就是我在函数上的注释。
在每次拖拽完成的回调函数中进行校验
这样的话每次我们拖拽完校验如果不合法就会回滚，就能保证每一行填充满了！！！！
以上是关于Vue3.0实现拖拽布局的主要内容，如果未能解决你的问题，请参考以下文章