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参数 官网有详细介绍
<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中怎么实现拖拽和缩放自定义看板vue-grid-layout的详细内容。