Vue3中怎么实现拖拽和缩放自定义看板vue-grid-layout

1. npm下载拖拽缩放库

npm install vue-grid-layout@3.0.0-beta1 --save

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

解决方案:vue3版本记得下载对应 vue-grid-layout@3.0.0-beta1版本的库，因为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的详细内容。更多信息请关注PHP中文网其他相关文章！