150 lines
3.3 KiB
Markdown
150 lines
3.3 KiB
Markdown
# ClayTop
|
||
|
||
|
||
|
||
<p align="center">
|
||
<img alt="vue" src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg?style=flat-square">
|
||
<img alt="g6" src="https://img.shields.io/badge/g6-3.5.7-brightgreen.svg?style=flat-square">
|
||
<img alt="license" src="https://img.shields.io/badge/license-MIT-green.svg?style=flat-square">
|
||
<img alt="release" src="https://img.shields.io/badge/release-v0.1.0-blue.svg?style=flat-square">
|
||
<a href="https://www.wenyuanblog.com/" style="text-decoration: none;">
|
||
<img src="https://img.shields.io/badge/about-My%20Blog-46BC99.svg?style=flat-square" alt="wenyuanblog">
|
||
</a>
|
||
<a href="https://www.wenyuanblog.com/medias/reward/wechatpay.png" style="text-decoration: none;">
|
||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg?style=flat-square" alt="donate">
|
||
</a>
|
||
</p>
|
||
|
||
> A visual graph editor component library based on G6 and Vue.js. </br>
|
||
> 基于G6和Vue的可视化图形编辑组件库。
|
||
|
||
## 一、 版本
|
||
|
||
| 开发版本 |
|
||
| :-------- |
|
||
| [v0.1.0](http://git.hchyun.com/clay/clay-top) |
|
||
|
||
## 二、预览
|
||
|
||
[DEMO演示](http://ClayTop.wenyuanblog.com)
|
||
|
||
|
||
## 三、项目依赖
|
||
|
||
* [Vue.js（2.x）](https://cn.vuejs.org/)
|
||
* ~~[Element UI（2.x）](https://element.eleme.cn/2.0/#/zh-CN)~~
|
||
* [AntV G6（3.x）](http://antv.alipay.com/zh-cn/index.html)
|
||
|
||
## 四、项目结构
|
||
|
||
```
|
||
.
|
||
├── packages // 源码
|
||
├── examples // 用例（开发调试用）
|
||
├── 其它
|
||
|
|
||
```
|
||
|
||
## 五、开发方式
|
||
|
||
### 1. 调试
|
||
|
||
```bash
|
||
npm install
|
||
npm run serve
|
||
```
|
||
|
||
### 2. 发布
|
||
|
||
```bash
|
||
npm run lib
|
||
npm pack
|
||
```
|
||
|
||
## 六、使用方式
|
||
|
||
|
||
|
||
#### 全局注册
|
||
|
||
在 `main.js` 中写入以下内容：
|
||
* 完整引入：引入整个ClayTop：
|
||
|
||
```javascript
|
||
import Vue from 'vue'
|
||
import router from './router'
|
||
import store from './store'
|
||
import ElementUI from 'element-ui'
|
||
|
||
import App from './App.vue'
|
||
|
||
Vue.use(ElementUI)
|
||
|
||
/* 全局注册：引入整个ClayTop */
|
||
import ClayTop from '@chaincloud/ClayTop'
|
||
Vue.use(ClayTop)
|
||
|
||
Vue.config.productionTip = false
|
||
|
||
new Vue({
|
||
router,
|
||
store,
|
||
render: h => h(App)
|
||
}).$mount('#app')
|
||
```
|
||
* 按需引入：引入需要的模块，例如Topology：
|
||
|
||
```javascript
|
||
import Vue from 'vue'
|
||
import router from './router'
|
||
import store from './store'
|
||
import ElementUI from 'element-ui'
|
||
|
||
import App from './App.vue'
|
||
|
||
Vue.use(ElementUI)
|
||
|
||
/* 全局注册：只加载Topology */
|
||
import { Topology } from '@chaincloud/ClayTop'
|
||
Vue.use(Topology)
|
||
|
||
Vue.config.productionTip = false
|
||
|
||
new Vue({
|
||
router,
|
||
store,
|
||
render: h => h(App)
|
||
}).$mount('#app')
|
||
```
|
||
|
||
#### 局部注册
|
||
|
||
在 `ComponentA.vue` 中进行局部注册：
|
||
```vue
|
||
<script>
|
||
import { Topology } from '@chaincloud/ClayTop'
|
||
|
||
export default {
|
||
name: 'ComponentA',
|
||
components: {
|
||
'topology': Topology
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 3. 开始使用
|
||
|
||
#### 属性
|
||
|
||
TODO...
|
||
|
||
#### 方法
|
||
|
||
TODO...
|
||
|
||
## 七、备注
|
||
|
||
* **\[已解决]** 升级 G6 到 3.5.0 后，发现 G6 底层有 [bug](https://github.com/antvis/G6/issues/1613)：调用addItem方法报错：`p.getType is not a function`。该 bug 导致编辑（连线）功能不可用，需等待下个小版本的修复。—— 2020.06.02
|
||
* **\[已解决]** 由于 G6 在 3.3.x 版本作了 breaking change，且遗留了一些 bug。本项目先暂停更新。预计 6 月份或 G6 底层这些重要 bug 修复后，继续跟进。—— 2020.03.01
|