1 Star 21 Fork 9

Maxfengyan / visual-drag

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

visual-drag

一款可视化编辑元素并生成html的vue操作组件

github在线预览地址

gitee在线预览地址

此项目参考 visual-drag-demo实现,做了较大改动,抛弃vuex依赖,改为纯vue组件状态开发,vue3+vite,组件即拿即用,移植方便可当作组件嵌入vue项目中

嵌入方式

1.复制src/visual-drag文件夹到新项目中

2.在vue中以component形式引入src/visual-drag/index.vue或者以router形式指向src/visual-drag/index.vue文件即可

tips: 确保新项目引入element-plus

项目截图

正常模式

正常模式

正常模式

完成功能:

左侧预览区 画布区域 顶部区域 右侧菜单区域
组件拖拽调整层级顺序 图片组件 清空画布 图片上传修改
点击组件预览区高亮 文字组件 暗黑模式 属性值修改后所有组件自响应
显示组件排序号顺序 热区组件 预览 属性值边界值限制
锁定 拖拽放大缩小
删除 旋转组件
上移 网格
下移 1280x720区域
上左右边界限制拖拽
解锁/锁定(组件锁定状态无法进行任何操作)
右键复制/粘贴
右键删除
右键置顶/置底
键盘事件-删除
键盘事件-上下左右移动
键盘事件-f5刷新页面给警告提示

未完成功能:

左侧预览区 画布区域 顶部区域 右侧菜单区域
点击预览区域组件定位组件 画布自定义尺寸 操作步骤回退/前进 添加事件
组件吸附 组合 添加动画
标线显示
下边界自动延伸
MIT License Copyright (c) 2022 Maxfengyan Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

一款vue3的拖拉拽可视化组件编辑器 展开 收起
JavaScript 等 4 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/Maxfengyan/visual-drag.git
git@gitee.com:Maxfengyan/visual-drag.git
Maxfengyan
visual-drag
visual-drag
master

搜索帮助