位置: 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系统命令查询)

  • 快手等级怎么看(自己快手等级怎么看)

    快手等级怎么看(自己快手等级怎么看)

  • 三星10和10+区别(三星10与10+区别)

    三星10和10+区别(三星10与10+区别)

  • 三星I9100 Galaxy S2上市时间(三星折叠屏手机最新款2022)

    三星I9100 Galaxy S2上市时间(三星折叠屏手机最新款2022)

  • 爱奇艺会员掉线的原因(爱奇艺会员掉线了怎么登录)

    爱奇艺会员掉线的原因(爱奇艺会员掉线了怎么登录)

  • 关闭修订有什么作用(关闭 修订)

    关闭修订有什么作用(关闭 修订)

  • ipad微信群发发不了(平板微信群发)

    ipad微信群发发不了(平板微信群发)

  • 优酷怎么看登录了几个设备(优酷怎么看登录人数)

    优酷怎么看登录了几个设备(优酷怎么看登录人数)

  • win10声音无法找到输入设备(win10声音无法找到输出设备怎么办)

    win10声音无法找到输入设备(win10声音无法找到输出设备怎么办)

  • oppo5g手机有哪些(oppo新款手机有哪些)

    oppo5g手机有哪些(oppo新款手机有哪些)

  • 硬盘突然不能识别(硬盘突然不认了)

    硬盘突然不能识别(硬盘突然不认了)

  • win10激活了就是正版吗(win10激活后显示什么)

    win10激活了就是正版吗(win10激活后显示什么)

  • 华为nova4怎么没有OTG(华为nova4怎么没有地震预警)

    华为nova4怎么没有OTG(华为nova4怎么没有地震预警)

  • iqoo手机有没有红外(iqoo手机有没有nfc功能)

    iqoo手机有没有红外(iqoo手机有没有nfc功能)

  • 演示模式有啥用(演示模式有什么用)

    演示模式有啥用(演示模式有什么用)

  • 小米cc9e支持闪充吗(小米cc9pro闪充)

    小米cc9e支持闪充吗(小米cc9pro闪充)

  • 安装路由器怎么设置(安装路由器怎么交网费)

    安装路由器怎么设置(安装路由器怎么交网费)

  • 怎么领取天猫购物津贴(天猫怎么领券购买)

    怎么领取天猫购物津贴(天猫怎么领券购买)

  • 优酷与土豆的关系(优酷和土豆是一家的吗)

    优酷与土豆的关系(优酷和土豆是一家的吗)

  • 微信挂夜是什么意思(微信挂夜是什么意思啊)

    微信挂夜是什么意思(微信挂夜是什么意思啊)

  • 滴滴多久不接单会封号(滴滴多久不接单恢复新手保护期)

    滴滴多久不接单会封号(滴滴多久不接单恢复新手保护期)

  • 快手没有同城怎么回事(快手没有同城怎么找人)

    快手没有同城怎么回事(快手没有同城怎么找人)

  • 苹果云相册在哪里打开(苹果云相册在哪里打开lcoluld)

    苹果云相册在哪里打开(苹果云相册在哪里打开lcoluld)

  • 苹果手机设备锁怎么弄(苹果手机设备锁是什么意思)

    苹果手机设备锁怎么弄(苹果手机设备锁是什么意思)

  • 电脑散热风扇怎么装(电脑散热风扇怎么接线)

    电脑散热风扇怎么装(电脑散热风扇怎么接线)

  • 如何把文件夹加密码锁(如何把文件夹加密码锁手机)

    如何把文件夹加密码锁(如何把文件夹加密码锁手机)

  • Vue|内置指令(vue内置指令实验总结)

    Vue|内置指令(vue内置指令实验总结)

  • 不动产租赁税率9%
  • 注册税务师考试科目
  • 耕地占用税的征收标准
  • 无形资产摊销的会计科目
  • 机器维修费属于变动成本吗
  • 总公司一般纳税多少
  • 所得税预提多了怎么处理
  • 发放短期外汇贷款的意义
  • 出纳去银行
  • 只开增值税普通发票,需要申报税务吗
  • 建筑业开具发票新规定
  • 茶叶加食用盐的妙用
  • 以货抵债会计处理
  • 多交增值税如何退回
  • 出口退税进项税额转出的计算
  • 房地产增值税如何抵扣
  • 库存与账面不符怎么办
  • 担保贷款造成的损失可以税前扣除吗?
  • 收到投资款怎么处理帐
  • win7纯净版系统
  • 暂时性差异的转回期间如何确定
  • 跨年的收入可以在次年冲吗
  • Mac怎么设置默认排序方式
  • 折扣负数的专用发票怎么开
  • 材料成本差异如何理解
  • 销售产品取得收入4500万元
  • 财务报表怎么判断盈亏
  • 应付职工薪酬的明细科目有哪些
  • 营改增后固定资产报废处置收入计税
  • php类的使用
  • 政府会计制度固定资产折旧方法
  • html可以描述什么
  • layui 使用
  • web前端初级知识点
  • nlp自然语言处理框架
  • 毕业设计基于51单片机多功能电子钟的设计
  • cancel怎么关
  • 培训机构先收费后付费
  • 会计要考哪些证书,难度如何
  • 织梦网站特有标识
  • 公司代扣代缴个人所得税是怎么算的
  • 小规模劳务派遣公司税率
  • 产品检测费计入成本吗
  • 其他资本公积主要包括
  • 国家为什么要征收各种税
  • sqlserver获取数据库名
  • sql语句取并集
  • 买新车检测
  • 母子公司关联交易规定
  • 个人所得税缴纳标准怎么计算
  • 捐赠支出入账
  • 如何暂估费用会计分录
  • 河道工程修建维护管理费何时开始停征?
  • 公司开业两年后辞职
  • 技术开发免税收入怎么算
  • 个体工商户注销代办
  • 结转存货跌价准备是什么意思
  • 个体工商户免征增值税政策
  • 转账手续费怎么入账
  • 为什么规定视同销售?
  • 办公用品的发票可以抵扣吗
  • 新公司要建哪些项目
  • 商业企业内部物流的主要作用是保证商品的正常销售
  • Win7 64位 mysql 5.7下载安装常见问题小结
  • ubuntu唤醒快捷键
  • 一个mac多重
  • linux系统的服务器,重启之后运算速度变慢
  • 游戏新手引导架构
  • option标签的作用
  • PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
  • Android 让EditText失去焦点避免自动弹出输入法
  • 画廊作品
  • javascript如何输出变量
  • Linux 中的Edquota命令
  • npm yarn命令对比
  • 瀑布流软件
  • wpf 设置鼠标样式
  • 什么是增值税免抵税额
  • 山东省税务局网站首页
  • 北京市国家税务局发票查询平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设