Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法

Vue Grid Layout官方文档

Vue Grid Layout中文文档

1. npm下载拖拽缩放库

npm install [email protected] --save

2. vue3 使用 vue-grid-layout报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.a is not a constructor

 解决方案: vue3版本记得下载对应 [email protected]版本的库，因为vue-grid-layout是vue2版本的，但用的是vue3版本，所以要安装vue3的依赖和相关配置

3.  在main.js中注册

// 将自动注册所有组件为全局组件
import keycloakInit from '@/utils/util.keycloak'
import VueGridLayout from 'vue-grid-layout'
 
const app = createApp(App)
app.use(store)
app.use(router)
app.use(ElementPlus)
app.use(VueGridLayout)
app.mount('#app')

4. 页面中使用组件 -- 控制保存和编辑

页面使用效果图:

点击布局进行自定义拖拽功能 ----- 效果图 ----- 箭头处可进行拖拽大小及位置:

 页面代码如下:

属性 GridLayout参数 和 GridItem参数 官网有详细介绍

到此这篇关于Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法的文章就介绍到这了,更多相关Vue3拖拽和缩放自定义看板 vue-grid-layout内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！