位置: IT常识 - 正文

VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout(vue 拖拽到目标区域)

编辑:rootadmin
VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout

推荐整理分享VUE3 中实现拖拽和缩放自定义看板 vue-grid-layout(vue 拖拽到目标区域),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue实现拖拽生成新的页面,vuejs拖拽,vue 拖拉拽,vue 拖拽到目标区域,vue 拖拽到目标区域,vue实现拖拽生成新的页面,vue实现拖拽生成新的页面,vue实现拖拽生成新的页面,内容如对您有帮助,希望把文章链接给更多的朋友!

Vue Grid Layout官方文档

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(vue 拖拽到目标区域)

 解决方案: 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 style="margin-left: 20px">{{ date }} {{ time }}</span> <div style="display: inline-block;position: absolute;right: 12%;"> <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" style="overflow: auto"> <!--测试组件--> <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>
本文链接地址:https://www.jiuchutong.com/zhishi/281310.html 转载请保留说明!

上一篇:win10电源图标不见了怎么办(win10电源图标灰色无法打开)

下一篇:Linux如何通过命令查看日志文件的某几行(中间几行或最后几行)(linux系统命令查询)

  • 2017年网络推广发帖有什么技巧(2021年网络推广渠道)

    2017年网络推广发帖有什么技巧(2021年网络推广渠道)

  • 华为nova7se支持无线充电的吗(华为nova7se支持广电5g吗)

    华为nova7se支持无线充电的吗(华为nova7se支持广电5g吗)

  • 联想2205硒鼓清零(联想2250硒鼓怎么清零)

    联想2205硒鼓清零(联想2250硒鼓怎么清零)

  • 小米手表微信没有提醒(小米手表微信没有声音)

    小米手表微信没有提醒(小米手表微信没有声音)

  • ip地址错误解网络无法接通(ip地址错误导致网络无法连接)

    ip地址错误解网络无法接通(ip地址错误导致网络无法连接)

  • 变频器故障代码err04(变频器故障代码大全)

    变频器故障代码err04(变频器故障代码大全)

  • 苹果怎么流量下载大于100m(苹果怎么流量下载)

    苹果怎么流量下载大于100m(苹果怎么流量下载)

  • 聊天fm什么意思(聊天fm什么意思啊)

    聊天fm什么意思(聊天fm什么意思啊)

  • qq神秘字符怎么没了(qq神秘字符fw)

    qq神秘字符怎么没了(qq神秘字符fw)

  • 智能网关用户名和密码是什么(智能网关用户名是什么)

    智能网关用户名和密码是什么(智能网关用户名是什么)

  • 华为p40怎么下载两个微信(华为p40怎么下载不了软件)

    华为p40怎么下载两个微信(华为p40怎么下载不了软件)

  • 爱奇艺网址是多少(爱奇艺的网站)

    爱奇艺网址是多少(爱奇艺的网站)

  • 苹果8p机身长多少厘米(苹果8p手机机长多少厘米)

    苹果8p机身长多少厘米(苹果8p手机机长多少厘米)

  • 抖音合拍怎么选本地视频(抖音合拍怎么选择视频时长)

    抖音合拍怎么选本地视频(抖音合拍怎么选择视频时长)

  • 手机外屏坏了怎么办(手机外屏坏了怎样修复)

    手机外屏坏了怎么办(手机外屏坏了怎样修复)

  • 乐视手机怎么显示手机卡的联系人(乐视手机设置没有了怎么办)

    乐视手机怎么显示手机卡的联系人(乐视手机设置没有了怎么办)

  • 剪映怎么导入本地音乐(剪映怎么导入本地录音搜索不到)

    剪映怎么导入本地音乐(剪映怎么导入本地录音搜索不到)

  • 苹果6怎么设置一键亮屏(苹果6怎么设置动态壁纸)

    苹果6怎么设置一键亮屏(苹果6怎么设置动态壁纸)

  • 快手验证码一般是多少(快手验证码一般多久收到)

    快手验证码一般是多少(快手验证码一般多久收到)

  • word2003怎么设置纸型(word2003怎么设置横向页面)

    word2003怎么设置纸型(word2003怎么设置横向页面)

  • 卖家未按约定时间发货怎么投诉(卖家未按约定时间发货怎么投诉卖家)

    卖家未按约定时间发货怎么投诉(卖家未按约定时间发货怎么投诉卖家)

  • gn8003l是什么型号(gn8002是什么型号)

    gn8003l是什么型号(gn8002是什么型号)

  • nm储存卡怎么使用(nm储存卡可以储存什么)

    nm储存卡怎么使用(nm储存卡可以储存什么)

  • ladc什么意思(lad表示什么)

    ladc什么意思(lad表示什么)

  • 华为p30微信怎么加密(华为P30微信怎么上锁)

    华为p30微信怎么加密(华为P30微信怎么上锁)

  • 苹果xr视频聊天怎么美颜(苹果xr视频聊天怎么开美颜相机)

    苹果xr视频聊天怎么美颜(苹果xr视频聊天怎么开美颜相机)

  • 深度学习大模型框架的简单介绍(ChatGPT背后原理的基本介绍)

    深度学习大模型框架的简单介绍(ChatGPT背后原理的基本介绍)

  • 税务ukey与税控盘的区别
  • 外部审计内容是什么
  • 广告公司小规模税率
  • 一般纳税人所得税是季报还是月报
  • 发票一定要填数量吗
  • 流动负债是总负债吗
  • 收取外部客户电费如何结转成本
  • 出售固定资产要做收入吗
  • 购买户外用品的app
  • 携税宝服务费可以入办公费吗
  • 公司合作建房什么意思
  • 资管产品征税
  • 提取备用金的手续费会计分录
  • 劳务报酬属于公司员工么
  • 清算汇缴报表填写模板
  • 冲回累计折旧
  • 对公账号钱怎么拿出来
  • 小规模纳税人专票开3%的专票,以后就不能享受1%
  • 土地转让应交税费
  • 电脑怎么备份系统win7
  • 为员工购买的团员保险
  • cpu天梯图,最新
  • bios中如何关闭cd/dvd
  • win10无法上网,显示灰色的飞行模式
  • 在建工程明细科目分不开怎么办
  • daio.dll 病毒
  • 结转存货的成本叫什么
  • 股东变更需要哪些手续的法律规定
  • 不得税前扣除的项目有哪些
  • mac如何使用php
  • uniapp 打开小程序
  • 手把手教你如何套路男神
  • 学生个人网页制作html5
  • thinkphp连接查询少数据
  • 个人所得税的现状分析
  • vue set up
  • javascript教程
  • 在建工程发生的非正常损失计入哪
  • 股东之间股权转让流程
  • 个人注册公司是否可以免税
  • 年终奖的个税税率
  • 增值税留抵税额是什么意思
  • 应付账款暂估款的账务处理
  • 资金过账属于洗钱吗
  • 吸收合并需要编制
  • 申请刻制发票专用章要求
  • 增资扩股影响原股东的利益吗
  • 新建厂房房产证办理流程
  • 长期合同价格怎么定
  • 用友为什么引入不了账套
  • 在计划管理中根据事实思考这一步的内容是
  • 小企业成本核算方法怎么填
  • 保险公司理赔时会查多久的病史
  • 建筑业异地预缴个税税率
  • 固定资产净值怎么算
  • 新企业的创建
  • 如何进行企业建账
  • sql空值用什么表示
  • sql如何实现循环
  • 查找共享打印机所在的电脑
  • 左右内边距代码
  • ctl.start
  • win7宽带连接错误651怎么办
  • 如何重置win10
  • mac vlc
  • linux的vi使用教程
  • centos搭建服务器
  • windows10mobile壁纸
  • linux版vnc
  • nodejs image
  • jquery的动画效果
  • c调用nodejs
  • 实用的批处理
  • android studio右边的视图不见了
  • websocket npm
  • django 表单
  • 广告轮播图片素材
  • 在linux安装python
  • 转让专利权取得的所得属于财产转让所得吗
  • 鸿蒙2.0哪个版本续航好
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设