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中文網其他相關文章！