介绍
@huajie-ng/work 是一个基于 Angular 框架开发的用于工作流设计和管理的前端组件库,内部封装了多种常用任务节点和流程控制节点,用户可以通过拖拽完成工作流设计,并且可以轻松实现节点状态的维护与流程管理。
安装
使用 npm 进行安装:
--- - ---------------
快速入门
使用该组件库还需要引入 @angular/material 和 @angular/cdk 库,这里我们先安装依赖:
--- - ----------------- ------------
在你的项目 app.module.ts 文件中需要进行如下配置:
------ ---------- ---- ---------------- ------ ------------- ---- ----------------- ------ ------------------------- ---- --------------------------------------- ------ ----------------- ---- --------------------------- ------ ---------------- ---- -------------------------- ------ ----------------- ---- --------------------------- ------ ---------------- ---- --------------------- ------ --------------- ---- -------------------- ------ - ---------- - ---- ------------------ ----------- -- ------- ------ -------- - ------------ ------------------------ ---------------- --------------- ---------------- --------------- -------------- ----------- -- -- --------- ------ -- ------ ----- --------- - -
使用工作流组件:
---------- --------------- ----------------- ------------- --------------------- ----------------- --------------------------------------------
参数说明:
nodeKey
:string 类型,必传,表示要显示的节点的 key 值。nodeData
:any 类型,必传,表示节点的详细数据。mode
:string 类型,非必传,默认为 edit,可选值为 edit、view,表示编辑或查看模式。readonly
:boolean 类型,非必传,默认为 false,表示是否只读。config
:any 类型,非必传,默认情况下会读取全局配置(可在模块中注入),如需替换,可以通过此参数传入新的配置信息。nodeClick
:function 类型,处理节点的点击事件。
示例代码
------ ----------- ---- ---------------- ------ ----------- ---- -------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ------- - ---- -------- - ------------------- ---- - ------- ------ - ----------------- -------- - ------ --------------- ----- ---- - -------------------- ------ - -
---- ------------------ ---------- --------------- ----------------- ------------- --------------------- ----------------- -------------------------------------------- ------
高级功能
更改节点状态
------ ----------- ---- ---------------- ------ ----------- ---- -------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ------- - ---- -------- - ------------------- ---- - ------- ------ - ----------------- -------- - ------ --------------- ----- ---- - -------------------- ------ ----------- - ---------- - -
节点属性自定义
------ ----------- ---- ---------------- ------ ----------- ---- -------------- ------------ --------- ----------- ------------ ----------------------- ---------- ------------------------ -- ------ ----- ------------ - ------- - ---- -------- - ------------------- ---- - ------- ------ - ----------------- -------- - ------ --------------- ----- ---- - -------------------- ------ -- ------- --------------- - ---------- - -
自定义节点模板
---------- --------------- ----------------- ------------- --------------------- ----------------- ------------------------------- ------------------------------------------ ------------ ------------- ---------------- ---- ----------------------------------------- --------------------------------- -- --------- ------------------- -------------- ------ --------------
总结
本文介绍了 @huajie-ng/work 这个前端组件库的安装和使用,并详细讲解了使用中需要注意的地方和一些高级功能的实现,希望对你进行工作流管理开发有所帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600566b281e8991b448e2f80