|
|
|
|
|
# vue-webtopo-svgeditor
|
|
|
|
|
|
|
|
|
|
|
|
> 基于vue3.2+ts实现的svg可视化web组态编辑器。可直接把svg文件和vue组件作为编辑器图形库使用，赋予其缩放和旋转等功能，并支持自定义拓展参数，实时控制组件状态等
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
qq交流群：209048413
|
|
|
|
|
|
|
|
|
|
|
|
## 项目优点
|
|
|
|
|
|
|
|
|
|
|
|
### 组态软件核心功能都具备
|
|
|
|
|
|
|
|
|
|
|
|
没有特殊需求，只需要配置好图形库，即可开始您的组态世界
|
|
|
|
|
|
|
|
|
|
|
|
### 优越的性能
|
|
|
|
|
|
|
|
|
|
|
|
使用了svg的symbol技术，use方式加载svg图形，同样的svg图形不管数量多少，只会渲染一次
|
|
|
|
|
|
|
|
|
|
|
|
### 学习成本极低
|
|
|
|
|
|
|
|
|
|
|
|
svg文件即组件，引入之后无需进行额外配置，编辑器会自适应解析加载组件，添加自定义组件和传统html无差，前端er零学习成本上手
|
|
|
|
|
|
|
|
|
|
|
|
### 易拓展
|
|
|
|
|
|
|
|
|
|
|
|
配置文件采用开放式结构，属性支持自定义拓展。图形库支持添加svg文件或者vue组件，定制开发将变得容易
|
|
|
|
|
|
|
|
|
|
|
|
### 易于集成
|
|
|
|
|
|
|
|
|
|
|
|
项目已经编写好了库模式脚本，组件已经发布到npm，支持外部传入自定义组件，支持组件事件订阅等
|
|
|
|
|
|
|
|
|
|
|
|
### 免费开源
|
|
|
|
|
|
|
|
|
|
|
|
MIT开源协议 可商用
|
|
|
|
|
|
|
|
|
|
|
|
## 项目说明
|
|
|
|
|
|
|
|
|
|
|
|
### 组件库
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
### 工具栏
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
### 画布
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
### 属性面板
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 图形库说明
|
|
|
|
|
|
|
|
|
|
|
|
### 有状态组件
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
### 无状态组件
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
### 自带动画组件
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
### 自定义svg
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
### vue组件
|
|
|
|
|
|
|
|
|
|
|
|
编写中，敬请期待
|
|
|
|
|
|
|
|
|
|
|
|
## 集成到已有项目
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
# 创建项目(已有项目跳过此步骤)
|
|
|
|
|
|
npm init vite@latest
|
|
|
|
|
|
|
|
|
|
|
|
# 进入项目目录
|
|
|
|
|
|
cd projectname
|
|
|
|
|
|
|
|
|
|
|
|
# 安装插件
|
|
|
|
|
|
pnpm i webtopo-svg-edit
|
|
|
|
|
|
|
|
|
|
|
|
# 安装pinia
|
|
|
|
|
|
pnpm i pinia
|
|
|
|
|
|
|
|
|
|
|
|
# 修改main.ts 注册pinia
|
|
|
|
|
|
import { createPinia } from 'pinia';
|
|
|
|
|
|
const app = createApp(App);
|
|
|
|
|
|
app.use(createPinia());
|
|
|
|
|
|
app.mount('#app')
|
|
|
|
|
|
|
|
|
|
|
|
#引入插件
|
|
|
|
|
|
import { WebtopoSvgEdit,WebtopoSvgPreview } from 'webtopo-svg-edit';
|
|
|
|
|
|
import 'webtopo-svg-edit/dist/style.css'
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
如果集成有问题请参考示例项目[vue-webtopo-svgeditor-example](https://github.com/yaolunmao/vue-webtopo-svgeditor-example)
|
|
|
|
|
|
|
|
|
|
|
|
**请注意：插件方式引入会导致左侧工具栏的icon图标无法正确显示，请自行寻找您项目构建工具的svg加载器，将icon图标转换成symbol，并将名字命名为‘svg-xxx’即可正常显示**
|
|
|
|
|
|
|
|
|
|
|
|
## 贡献代码
|
|
|
|
|
|
|
|
|
|
|
|
1. Fork 本项目
|
|
|
|
|
|
2. 新建 Feat_xxx 分支
|
|
|
|
|
|
3. 提交代码
|
|
|
|
|
|
4. 新建 Pull Request
|
|
|
|
|
|
|
|
|
|
|
|
**只接受github的pr，gitee为github镜像库**
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 声明
|
|
|
|
|
|
|
|
|
|
|
|
**本项目组件库来源均为网络，仅供学习交流使用，请勿将本项目里面的组件用于商业用途**
|
|
|
|
|
|
|
|
|
|
|
|
## 君子协议
|
|
|
|
|
|
|
|
|
|
|
|
开源版使用时请保留底部的版权声明，感谢支持
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 常见问题
|
|
|
|
|
|
|
|
|
|
|
|
行尾序列问题（error Delete `␍` prettier/prettier）
|
|
|
|
|
|
git config --global core.autocrlf false
|
|
|
|
|
|
|
|
|
|
|
|
## 捐助
|
|
|
|
|
|
|
|
|
|
|
|
如果这个项目对您有所帮助，请扫下方二维码打赏一杯咖啡。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 感谢以下小伙伴为此项目做出的贡献
|
|
|
|
|
|
|
|
|
|
|
|
<a href="https://github.com/yaolunmao/vue-webtopo-svgeditor/graphs/contributors"><img src="https://contrib.rocks/image?repo=yaolunmao/vue-webtopo-svgeditor" /></a>
|
