add doc
This commit is contained in:
@@ -9,3 +9,5 @@ dooringx-lib 的事件是在eventCenter上,它上面会集成functionCenter与
|
||||
在eventCenter中可以获取组件注册的时机。时机类似于组件生命周期一样,可以注册后在对应的时机进行调用。
|
||||
|
||||
而functionCenter中的函数则会与时机结合,再由事件链对用户设定的队列进行统一处理。
|
||||
|
||||
每个事件链在执行中会有上下文对象,这个对象会贯穿这个事件链。
|
@@ -99,3 +99,5 @@ function MInput(props: MInputProps) {
|
||||
由于可以很轻松的拿到store,所以可以在任意地方进行修改数据。
|
||||
|
||||
将组件的value关联current的属性,onChange去修改store,这样就完成了个双向绑定。
|
||||
|
||||
注意:如果你的右侧组件需要用到block以外的属性,可能需要去判断是否处于弹窗模式。
|
@@ -1,5 +1,135 @@
|
||||
---
|
||||
title: 函数开发
|
||||
title: 函数
|
||||
sTitle: dooringx-lib插件开发
|
||||
order: 16
|
||||
---
|
||||
|
||||
|
||||
## 函数导入
|
||||
|
||||
函数导入做成对象置入initFunctionMap即可
|
||||
|
||||
```js
|
||||
initFunctionMap: functionMap,
|
||||
```
|
||||
|
||||
## 函数开发
|
||||
|
||||
|
||||
键名会显示出来所以键名是唯一的。
|
||||
|
||||
它的值是2个对象,一个是函数内容fn,一个是配置项config。
|
||||
|
||||
config中的数组里每个配置会显示出来让用户去配置,name则是展示名字,data代表数据去哪里获取,可以选择从输入框(input),数据源(dataSource),上下文(ctx)中获取,另外还有个特殊的弹窗(modal)。
|
||||
|
||||
options中的receive表示会从args哪个键上获取该值。
|
||||
|
||||
multi代表是否允许多个选项配置。
|
||||
|
||||
dooringx-lib中写好了2个函数changeUserValue与changeUserValueRecord,第一个函数会将得到的结果做成数组,如果非multi则取第一个结果就行。而第二个函数会将结果做成对象,比如用户在数据源中选了keya,那么就会把数据源的键值对作为个对象返回。
|
||||
|
||||
|
||||
fn中,第一个ctx参数代表上下文,如果有转换函数之类,可能需要使用(比如要把第一个函数的结果导给后面的函数)
|
||||
|
||||
第二个参数next是需要运行完毕后执行的,否则事件链会一直在该函数中不退出。
|
||||
|
||||
第三个参数config就可以拿到整个config对象。
|
||||
|
||||
第四个参数args是用户填写的参数,会根据options里填写的字段进行返回。
|
||||
|
||||
第五个是eventList,可以获取整个事件链的参数。
|
||||
|
||||
第六个参数iname可以拿到用户的选择项。
|
||||
|
||||
|
||||
```js
|
||||
通用GET请求函数: {
|
||||
fn: (ctx, next, config, args, _eventList, iname) => {
|
||||
console.log(args, '参数x');
|
||||
const userSelect = iname.data;
|
||||
const urlVal = changeUserValue(
|
||||
userSelect['请求url'],
|
||||
args,
|
||||
'_url',
|
||||
config,
|
||||
ctx
|
||||
); // input datasource ctx //datasource会去取值 ,ctx取ctx上字段
|
||||
const paramSource = changeUserValueRecord(
|
||||
// 设定只能从datasource或者ctx里取
|
||||
userSelect['请求参数'],
|
||||
args,
|
||||
'_origin',
|
||||
config,
|
||||
ctx
|
||||
);
|
||||
const ctxVal = changeUserValue(
|
||||
userSelect['返回上下文字段'],
|
||||
args,
|
||||
'_ctx',
|
||||
config,
|
||||
ctx
|
||||
);
|
||||
// 检查参数是否存在
|
||||
// 都是数组,非multi则取第一个。
|
||||
const url = urlVal[0];
|
||||
if (!url) {
|
||||
return next();
|
||||
}
|
||||
const ctxKey = ctxVal[0];
|
||||
|
||||
axios
|
||||
.get(url, {
|
||||
params: {
|
||||
...paramSource,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
const data = res.data;
|
||||
ctx[ctxKey] = data;
|
||||
next();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
next();
|
||||
});
|
||||
},
|
||||
config: [
|
||||
{
|
||||
name: '请求url',
|
||||
data: ['dataSource', 'ctx', 'input'],
|
||||
options: {
|
||||
receive: '_url',
|
||||
multi: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '请求参数',
|
||||
data: ['dataSource', 'ctx'],
|
||||
options: {
|
||||
receive: '_origin',
|
||||
multi: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '返回上下文字段',
|
||||
data: ['input'],
|
||||
options: {
|
||||
receive: '_ctx',
|
||||
multi: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
```
|
||||
|
||||
## 时机与函数装载
|
||||
|
||||
如果有需要,一般使用:
|
||||
|
||||
```js
|
||||
eventCenter.manualUpdateMap(cur, displayName, arr);
|
||||
```
|
||||
|
||||
manualUpdateMap第一个是时机名,第二个是展示名,第三个是用户选择。
|
||||
|
||||
更新事件中心后还需要更新store,结果以store为准。
|
||||
|
@@ -2,8 +2,8 @@
|
||||
* @Author: yehuozhili
|
||||
* @Date: 2021-07-07 14:29:38
|
||||
* @LastEditors: yehuozhili
|
||||
* @LastEditTime: 2021-07-09 13:51:32
|
||||
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\registFormComponents.ts
|
||||
* @LastEditTime: 2021-07-12 11:24:56
|
||||
* @FilePath: \dooringx\packages\dooringx-example\src\plugin\formComponentModules.ts
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -18,4 +18,4 @@ export const Formmodules: Record<string, FunctionComponent<any> | ComponentClass
|
||||
const value = modulesFiles(modulePath);
|
||||
modules[name] = value.default;
|
||||
return modules;
|
||||
}, []);
|
||||
}, {});
|
||||
|
Reference in New Issue
Block a user