本文小编为大家详细介绍“VUE3中如何实现拖拽与缩放自定义看板”，内容详细，步骤清晰，细节处理妥当，希望这篇“VUE3中如何实现拖拽与缩放自定义看板”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
1. npm下载拖拽缩放库
npm install vue-grid-layout@3.0.0-beta1 --savevue3 使用 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参数 官网有详细介绍
<template> <div class="nav-wrapper-b"> <div class="bar-title-b"> {{getChangeLine + ' ' + barTitle}} </div> <div class="time-b"> <span >{{ date }} {{ time }}</span> <div > <el-button v-if="isEditDraggable" type="success" size="small" @click="saveDragDataHome">保存 </el-button> <el-button v-else type="primary" size="small" @click="editDragDataHome">布局 </el-button> </div> </div> </div> <div class="home-container-b"> <!--********************** 实现自定义组件 *********************--> <div class="drag-body" :class="isEditDraggable ? 'drag-body-edit' : ''"> <grid-layout :layout.sync="layoutDraggableList" :col-num="100" :row-height="5" :is-draggable="draggableLayout" :is-resizable="resizableLayout" :vertical-compact="true" :use-css-transforms="true"> <grid-item v-for="item in layoutDraggableList" :static="false" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" > <!--测试组件--> <div class="layout-component top-left-first-components" v-if="item.i == 'topLeftFirst'"> <box-container-is> 00001 </box-container-is> </div> <!--前五组件--> <div class="layout-component" v-if="item.i == 'topLeftSecond'"> <box-container :boxTitle="'测试1'"> 00002 </box-container> </div> <!--前五--> <div class="layout-component" v-if="item.i == 'topLeftThird'"> <box-container :boxTitle="'测试2'"> 00003 </box-container> </div> <!--信息组件--> <div class="layout-component" v-if="item.i == 'topRightFirst'"> <box-container-is> 00004 </box-container-is> </div> <!--组件--> <div class="layout-component" v-if="item.i == 'topRightSecond'"> <box-container> <topRightSecondBHome></topRightSecondBHome> </box-container> </div> <!--组件--> <div class="layout-component" v-if="item.i == 'topRightThird'"> <box-container-is> <topRightThirdBHome></topRightThirdBHome> </box-container-is> </div> </grid-item> </grid-layout> </div> </div></template> <script setup> import emitter from '@/utils/eventbus' import {getDate, getTime, getTimeHours} from "@/utils/date"; import {useRoute, useRouter} from "vue-router"; import boxContainer from "@/components/boxContainer/index"; import boxContainerIs from "@/components/boxContainer/index1"; import { workOrderLine, topRightSecondBHome, topRightThirdBHome, } from "./components"; import {computed, ref} from "vue"; import {getCurrentInstance, nextTick} from "@vue/runtime-core"; import {onBeforeUnmount, onMounted, watch} from "vue"; import {saveTemplateApi} from '@/api/workOrderLineApi' import {ElMessage} from "element-plus"; const {proxy} = getCurrentInstance() //年月日 const date = ref(getDate()); //时分秒 const time = ref(getTime()); const getChangeLine = ref('') const hours = ref(getTimeHours()) const barTitle = ref("") const router = useRouter(); let isEditDraggable = ref(false) const draggableLayout = ref(false) const resizableLayout = ref(false) const layoutDraggableList = ref([]) //点击编辑布局 function editDragDataHome() { isEditDraggable.value = true } //保存布局 function saveDragDataHome() { isEditDraggable.value = false console.log(layoutDraggableList.value) saveTemplateApi(layoutDraggableList.value).then(response => { if (response.code == 200) { ElMessage({ message: '模板布局已保存成功', type: 'success', duration: 6 * 1000 }) } }) } //模拟后端请求到的数据 let demoData = ref({ "id": 162, "subjectId": 161, "name": "主页", "title": "生产分析", "description": "第一个看板菜单信息", "templateList": [ { "id": 163, "titleName": "人员信息", "disabled": true, "i": "topLeftFirst", "x": 0, "y": 0, "w": 41, "h": 10, "menuId": 162 }, { "id": 164, "titleName": "前五", "disabled": true, "i": "topLeftSecond", "x": 0, "y": 10, "w": 41, "h": 21, "menuId": 162 }, { "id": 165, "titleName": "吸嘴-抛料率前五", "disabled": true, "i": "topLeftThird", "x": 0, "y": 31, "w": 41, "h": 21, "menuId": 162 }, { "id": 166, "titleName": "", "disabled": true, "i": "topRightFirst", "x": 41, "y": 0, "w": 59, "h": 10, "menuId": 162 }, { "id": 167, "titleName": "", "disabled": true, "i": "topRightSecond", "x": 41, "y": 10, "w": 59, "h": 23, "menuId": 162 }, { "id": 168, "titleName": "", "disabled": true, "i": "topRightThird", "x": 41, "y": 33, "w": 59, "h": 19, "menuId": 162 } ] }) initialHeightFun(demoData.value) //根据高度进行调整尺寸 function initialHeightFun(data) { nextTick(() => { layoutDraggableList.value = data.templateList barTitle.value = data.title }) } onBeforeUnmount(() => {}) //监听拖拽功能 watch(isEditDraggable, (res) => { draggableLayout.value = !draggableLayout.value; resizableLayout.value = !resizableLayout.value; })</script> <style lang="scss" scoped> .drag-body { width: 100%; height: 100%; } .layout-component { width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-content: space-between; } .layout-component-low-warning-second { width: 95%; height: 100%; margin-right: 1%; float: left; } .layout-component-low-warning-text { width: 4%; height: 100%; float: right; } .layout-component-low-throwing-second { width: 100%; height: 100%; } .drag-body-edit { .vue-grid-item:not(.vue-grid-placeholder) { outline: 2px solid rgba(255, 96, 28, 0.71); } } .vue-grid-item { box-sizing: border-box !important; } .vue-grid-layout { background: url("~@/assets/image/bg1.png"); -moz-background-size: 100% 100%; background-size: 100% 100%; } ::v-deep .vue-resizable-handle { background: url("~@/assets/image/ic_show_more.png") no-repeat 100% 100%; padding: 0 3px 3px 0; background-origin: content-box; -webkit-box-sizing: border-box; position: absolute; width: 45px; height: 45px; bottom: 0; right: 0; } .vue-grid-item:not(.vue-grid-placeholder) { //border: 1px solid #409eff; color: #ffffff; } .vue-grid-item .resizing { opacity: 0.9; } .vue-grid-item .static { background: transparent; } .vue-grid-item .text { font-size: 24px; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 100%; width: 100%; } .vue-grid-item .no-drag { height: 100%; width: 100%; } .vue-grid-item .minMax { font-size: 12px; } .vue-grid-item .add { cursor: pointer; } .nav-wrapper-b { height: 60px; line-height: 60px; width: 100%; background: url("~@/assets/image/top.png") no-repeat; background-size: 100% 100%; text-align: center; position: relative; color: #d5dfe8; font-family: "黑体"; .bar-title-b { font-size: 32px; color: #ffffff; font-weight: bolder; } .time-b { position: absolute; right: 1%; top: 50%; transform: translateY(-35%); font-family: "Time Number"; font-weight: bold; font-size: 29px; width: 35%; } .mapChoose-b { position: absolute; left: 22px; bottom: 15px; color: #eee; } } .home-container-b { width: 100%; height: 100%; position: relative; margin-top: 0; } .nav_btn { position: absolute; top: 5px; width: 50%; height: auto; }</style>读到这里，这篇“VUE3中如何实现拖拽与缩放自定义看板”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
