# processnodeh5
**Repository Path**: post-man/processnodeh5
## Basic Information
- **Project Name**: processnodeh5
- **Description**: 流程节点图，web Component组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-24
- **Last Updated**: 2023-04-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 欢迎使用 processnodeh5 （web Component组件）
**processnodeh5 是使用Svelte开发，rollup打包打出来的web Component组件**
**是一款 节点流转图，功能简单，所以场景受限，适合做一些有顺序节点的展示需要**
## processnodeh5 仓库和预览
[git地址](https://github.com/sirxue66/processnodeh5/tree/main/package)
[预览地址](https://sirxue66.github.io/processnodeh5/)
## props
| props | 解释 | type | 默认值 | 是否必须 |
| ------------- | ------------- | --------- | ----------- | -------------|
| nodelist | 节点流程数组 | string | [] | 否 |
| w | 流程图整体宽度 | string | 1000 | 否 |
| nodewidth | 单个节点+箭头icon的宽度 | string | 160 | 否 |
| iconwidth | 单个箭头icon的宽度 | string | 20 | 否 |
| iconcolor | 箭头的颜色 | string | #1890ff | 否 |
| rowspacing | 两行节点间的间隙 | string | 3 | 否 |
#### **nodelist要求**
**nodelist数组中每一项应该包含两个字段 name 和 nodename；**
**nodename: 节点显示的名称字段**
**name: 如果节点使用插槽替换，每个节点的插槽名称就是该项数据的name字段，并且每项数据的name字段应该保持唯一**
## slot
**每个节点的插槽name就是该项数据的name字段所指定的**
**所以完全可以自定义的使用slot循环节点，而不必理会排序和显示的问题**
**例如vue中**
```html
```
## event --> node-click-event
**组件的自定义事件为了兼容性是绑定在window上，所以可以使用事件监听来监听节点的点击事件**
**例如**
```js
window.addEventListener('node-click-event', function(e){
console.log(e.detail)
}, false)
```
## 使用示例
**使用es包**
```javascript
```
**使用umd包（或者使用npm包）**
```javascript
```