# u-processes

> 用于流程的组件库

Latest version **0.0.4** (published 2021-03-03) · 0 weekly downloads

## Install

```sh
npm install u-processes
pnpm add u-processes
yarn add u-processes
bun add u-processes
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-03-03 |
| First published | 2020-12-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 440.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | itcheung |

## Links

- npm: https://www.npmjs.com/package/u-processes
- npm.io page: https://npm.io/package/u-processes

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [vuex](https://npm.io/package/vuex.md) ^3.4.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [vue-router](https://npm.io/package/vue-router.md) ^3.2.0
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^1.7.2

## Recent versions

- 0.0.4 (latest) — 2021-03-03
- 0.0.3 — 2021-01-11
- 0.0.2 — 2021-01-07
- 0.0.1 — 2020-12-29

## README

## 上手

现在从 npm 安装并引入 u-processes

` npm install u-processes -S `

修改 src/main.js

```
import Vue from 'vue';
import UProcesses from 'u-processes'
Vue.use(UProcesses)     
```



## 表单 u-form (API)

<!-- <div style="width:100px">描述</div>  -->

使用表单之前必须引入的组件有
`
    a-form-model , 
    a-form-model-item , 
    a-row , 
    a-row ,
`
(如果你已经全局引入,请忽略)

|<div style="width:100px">属性</div>|<div style="width:400px">说明</div>|<div style="width:100px">类型</div>|<div style="width:100px">默认值</div>|
|:---|:--|:---|:---|
|span|栅格占位格数，为 0 时相当于 display: none (24 栅格系统)|number|12
|formFormat|表单格式 <a href="#表单格式">详情</a>|array|[ ]|
|formData|表单数据对象,用于校验规则等|object|{ }|
|rules|表单验证规则|object||




### 表单格式

|<div style="width:100px">属性</div>|<div style="width:400px">说明</div>|<div style="width:100px">类型</div>|<div style="width:100px">默认值</div>|
|:---|:--|:---|:---|
|formItemProps| 传入的对象将会以 { ...formItemProps }  的形式绑定到\<a-form-model-item \>标签 <a href="#formItemProps">详情</a> |object|
|formFormat|表单格式 |array|[ ]|
|component|渲染组件类型  <a href="#输入框">输入框</a> |string|
|inputProps|component对应组件的属性,传入的对象将会以 { ...inputProps } 的形式绑定到对应组件 |array|[ ]|
|cancelEdit|不能编辑 |boolean| false|


### formItemProps

<table><thead><tr><th>参数</th> <th style="width:400px"> <div >说明</div></th> <th>类型</th> <th>默认值</th> <th>版本</th></tr></thead> <tbody><tr><td>prop</td> <td>表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的</td> <td>string</td> <td></td> <td></td></tr> <tr><td>rules</td> <td>表单验证规则</td> <td>object | array</td> <td></td> <td></td></tr> <tr><td>autoLink</td> <td>是否自动关联表单域，对于大部分情况都可以使用自动关联，如果不满足自动关联的条件，可以手动关联，参见下方注意事项</td> <td>boolean</td> <td>true</td> <td></td></tr> <tr><td>colon</td> <td>配合 label 属性使用，表示是否显示 label 后面的冒号</td> <td>boolean</td> <td>true</td> <td></td></tr> <tr><td>extra</td> <td>额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。</td> <td>string|slot</td> <td></td> <td></td></tr> <tr><td>hasFeedback</td> <td>配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用</td> <td>boolean</td> <td>false</td> <td></td></tr> <tr><td>help</td> <td>提示信息，如不设置，则会根据校验规则自动生成</td> <td>string|slot</td> <td></td> <td></td></tr> <tr><td>htmlFor</td> <td>设置子元素 label <code>htmlFor</code> 属性</td> <td>string</td> <td></td> <td></td></tr> <tr><td>label</td> <td>label 标签的文本</td> <td>string|slot</td> <td></td> <td></td></tr> <tr><td>labelCol</td> <td>label 标签布局，同 <code>&lt;Col&gt;</code> 组件，设置 <code>span</code> <code>offset</code> 值，如 <code>{span: 3, offset: 12}</code> 或 <code>sm: {span: 3, offset: 12}</code></td> <td><a href="/components/grid-cn/#Col">object</a></td> <td></td> <td></td></tr> <tr><td>labelAlign</td> <td>标签文本对齐方式</td> <td>'left' | 'right'</td> <td>'right'</td> <td></td></tr> <tr><td>required</td> <td>是否必填，如不设置，则会根据校验规则自动生成</td> <td>boolean</td> <td>false</td> <td></td></tr> <tr><td>validateStatus</td> <td>校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating'</td> <td>string</td> <td></td> <td></td></tr> <tr><td>wrapperCol</td> <td>需要为输入控件设置布局样式时，使用该属性，用法同 labelCol</td> <td><a href="/components/grid-cn/#Col">object</a></td> <td></td> <td></td></tr></tbody></table>


## 输入框

使用表单之前必须引入的组件有
`
    a-input
`
(如果你已经全局引入,请忽略)


## 树选择

使用表单之前必须引入的组件有
`
    a-tree-select
`
(如果你已经全局引入,请忽略),你可以在formFormat的对应inputProps中传入a-tree-select的所有props <a href="https://www.antdv.com/components/tree-select-cn/#Tree-props">详情</a>







# 发布npm 打包命令

>> npm run lib

---
_Source: https://npm.io/package/u-processes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._