基于VUE的WEB组态-支持拖动

最新推荐文章于 2024-07-08 23:01:07 发布
最新推荐文章于 2024-07-08 23:01:07 发布
阅读量9.4k 收藏 22
点赞数 3
分类专栏： javascript 网页前端 文章标签： web组态 开源WEB组态 WEB可视化 VUE组态
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lpch1987/article/details/96288974
版权

源码：github地址(https://github.com/phynos/WebTopo)

 

功能列表

面板标尺

拖曳添加组件

位置拖动

拖动位置磁性吸附

控制大小（8个控制锚点）

选中效果

层叠控制

面板比例缩放

CTRL+C/V复制黏贴

CTRL+A多选

鼠标方框多选

DELETE删除（支持删除多个）

样式配置（文字、大小、位置、边框、颜色、旋转）

组件继承体系

DOM组件（文字、图片）

canvas组件（圆形、三角形、矩形、线条、箭头线条）

echarts组件

组件同步/异步数据加载

主界面预览
标题

 

_贺兰
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
基于vue3实现的svg可视化web组态编辑器，可无需修改代码动态添加svg组件，主要用于物联网mqtt实时系统图
05-23
基于vue3实现的svg可视化web组态编辑器，可无需修改代码动态添加svg组件，可直接把 svg 文件和 vue 组件作为编辑器图形库使用，赋予其缩放和旋转等功能，并支持自定义拓展参数，实时控制组件状态等,主要用于物联网mqtt实时系统图
高级前端必会之基于Vue的web组态软件
MMKJSH的博客
09-16 1728
高级前端必会之基于Vue的web组态软件
最火前端WEB组态软件(可视化)
最新发布
2406_86227531的博客
07-08 1104
BY组态是一款功能强大的基于Web的可视化组态编辑器插件，采用标准HTML5技术，基于B/S架构进行开发，支持WEB端呈现，支持在浏览器端完成便捷的人机交互，简单的拖拽即可完成可视化页面的设计
物联网WEB组态-可拖拽的组态软件-BY组态
bxds123的专栏
07-10 807
BY组态是一款非常优秀的纯前端的【web组态插件工具】，可无缝嵌入到vue项目，react项目等，由于是原生js开发，对于前端的集成没有框架的限制。同时由于BY组态只是一个插件，不能独立运行，必须嵌入到你方软件平台才能使用，所以你方软件平台需要提供后台接口来支撑BY组态插件的运行。BY组态为你方软件平台添加组态工具提供了非常友好解决方案。BY组态工具能与你方软件平台完全融为一体，没有任何违和感。目前BY组态广泛应用于化工、石化、制药、冶金、建材、市政、环保、电力等几十个行业。 BY组态是一款性能稳定，功能
WebTopo:基于VUE的web组态（组态，拓扑图，拓扑编辑器）
05-10
WEB组态 基于vue+quasar的web组态，核心代码基于vue，quasar仅仅是为了方便构建 预览地址： github预览地址： 更新日志 后续重点TODO 完善撤销和恢复 折线箭头（思路：增加控制锚点作为转折点） 属性元数据设计和属性编辑UI生成（思路：仿造winform的属性面板） 功能清单 功能 状态 面板标尺 完成 拖曳添加组件 完成 位置移动-鼠标 完成 位置移动-方向键 完成 位置移动-批量 完成 拖动位置磁性吸附 未完成 尺寸锚点（8个） 完成 旋转锚点 未完成 选中效果 完成 层叠控制 完成 面板比例缩放 完成 CTRL+C/V复制黏贴 完成 CTRL+A多选 完成 鼠标框选 完成 DELETE删除（支持删除多个） 完成 样式配置（文字、大小、位置、边框、颜色、旋转） 完成 组件继承体系 完成 DOM组件（文字、图片） 完成 canvas组件（圆形、三角形、矩形、线
几种常用组态软件的
09-12
组态王专题之：几种常用组态软件的对比组态王专题之：几种常用组态软件的对比
Vue中组态实现方案-BaseMap的使用
BADAO_LIUMANG_QIZHI的博客
03-30 1685
场景 Vue中实现组态绘制的效果 可以方便的实现自由绘制底图与展示效果。 github地址： https://github.com/bojue/BaseMap gitee地址： https://gitee.com/JiaBin520/BaseMap 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 将代码克隆到本地 git clone https://gi.
Vue中组态实现方案-BaseMap.rar
03-30
Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar Vue中组态实现方案-BaseMap.rar
Vue中Web组态实现方案-WebTopo的使用
BADAO_LIUMANG_QIZHI的博客
03-30 2904
场景 Web组态实现效果 WebTopo的github地址 https://github.com/phynos/WebTopo 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 首先你的电脑需要安装node，可以使用npm进行安装依赖 进入根目录执行 npm install 建议使用 cnpm install 如果安装依赖有问题，两种方式切换着用或者多.
基于Vue的vue-admin-better管理后台框架设计源码
05-23
vue-admin-better是一个基于Vue开发的国内首个纯净的vue3管理后台框架，包含197个文件，其中包括76个JavaScript文件、72个Vue文件、7个JPG图片文件、7个SCSS文件、6个PNG图片文件、5个CSS文件、4个JSON文件和4个SVG...
vue-web-cam：VueJ的网络摄像头组件
02-06
npm install vue-web-cam --save // or yarn add vue-web-cam 用法 import Vue from 'vue' import WebCam from "../../src" ; Vue . use ( WebCam ) ; < vue> // or import { WebCam } from "vue-web-cam" ; ...
基于vue3实现的svg可视化web组态编辑器。可无需修改代码动态添加svg组件.zip
02-19
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
Vue-Element-Admin则是一个基于Vue.js和Element-UI的后台管理系统模板，它包含了一套完整的管理端页面结构和基础功能，如登录、权限控制、多语言支持等，大大简化了前端开发的工作量。在本项目中，Vue-Element-Admin...
基于Vue的chengduyiyuan-web成都医院前台设计源码
05-26
本项目是基于Vue的chengduyiyuan-web成都医院前台设计源码，包含1118个文件，其中包括577个Vue文件、301个JavaScript文件、102个GIF图片文件、88个PNG图片文件、17个SCSS文件、8个CSS文件、6个JSON文件、4个TrueType...
vue-data-tablee-基于vue-good-table，一个简单而漂亮的表组件-Vue.js开发
05-27
这个基于vue-good-table，一个简单而漂亮的表组件。 安装从npm安装。 Vue数据表Yeap，另一个Vue表组件。 这个基于vue-good-table，一个简单而漂亮的表组件。 安装从npm安装。 npm install vue-data-tablee使用Vue....
vue组态实现矩形在画布内移动和缩放
77今天也学习了的博客
11-12 1279
<!-- vue组态实现矩形在画布内移动： --> <template> <div id="test" @mousemove="get" :style="{'left':fastartLeft+'px','top':fastartTop+'px'}"> <h1>测试vue组态--实现移动和拖拽</h1> <p>鼠标坐标：</p> <p&gt
vue配合gojs实现工业组态绘制
qq_37656005的博客
12-03 3996
vue配合gojs实现工业组态绘制 通过从左侧拖拽区拖拽图片到中间画布区，之后可对此图标进行大小尺寸调整，旋转，删除，绑定等操作进行合理布局 拖拽、复制、粘贴、选择、鼠标右键事件、剪切、文本编辑、删除、撤销、查看信息、模板、数据源绑定、事件处理程序、调色板、自动布局、添加画布或者节点的监听事件
【VUE】四 vue组件化开发
春天的波菜
02-28 254
在开发过程中，我们可以将页面中 某一部分 的功能编写成一个组件，然后再在页面上进行引用。有利于划分功能模块的开发（HTML、CSS、JavaScript等相关代码都集成到组件中）。有利于重用。
vue pixi 组态图
weixin_44995829的博客
10-13 282
https://zhuanlan.zhihu.com/p/601858700
写一段基于vue-baidu-map拖动bm-marker获取经纬度和详细地址的代码
05-20
以下是一个基于vue-baidu-map拖动bm-marker获取经纬度和详细地址的代码示例： ``` <template> <div> <baidu-map ak="your_baidu_map_ak" @ready="onMapReady" :center="center" :zoom="zoom" style="height: 500px;"> <bm-marker :position="markerPosition" :label="markerLabel" :enableDragging="true" @dragging="onMarkerDragging" @dragend="onMarkerDragEnd"> </bm-marker> </baidu-map> <div v-if="address">{{ address }}</div> </div> </template> <script> import { BaiduMap, BmMarker } from 'vue-baidu-map' export default { components: { BaiduMap, BmMarker }, data() { return { center: { lng: 116.404, lat: 39.915 }, zoom: 15, markerPosition: { lng: 116.404, lat: 39.915 }, markerLabel: { content: '拖动我获取位置信息', offset: { width: 30, height: -30 } }, address: '' } }, methods: { onMapReady(map) { this.geocoder = new window.BMap.Geocoder() }, onMarkerDragging(event) { this.markerPosition = event.point }, onMarkerDragEnd(event) { this.markerPosition = event.point this.getAddress(this.markerPosition) }, getAddress(point) { this.geocoder.getLocation(point, result => { if (result) { this.address = result.address } }) } } } </script> ``` 在这个示例中，我们使用了vue-baidu-map组件库来创建一个百度地图实例。然后，我们在地图上放置了一个可拖动的marker，并监听marker的dragging和dragend事件来更新marker的位置并获取对应的详细地址。其中，我们使用了百度地图的Geocoder类来获取地址信息。最后，我们将获取到的地址显示在页面上。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值