This commit is contained in:
hufeixiong
2021-07-12 11:37:22 +08:00
parent 2ee2c3fb50
commit 0df7aff097
4 changed files with 141 additions and 7 deletions

View File

@@ -8,4 +8,6 @@ dooringx-lib 的事件是在eventCenter上它上面会集成functionCenter与
在eventCenter中可以获取组件注册的时机。时机类似于组件生命周期一样可以注册后在对应的时机进行调用。
而functionCenter中的函数则会与时机结合再由事件链对用户设定的队列进行统一处理。
而functionCenter中的函数则会与时机结合再由事件链对用户设定的队列进行统一处理。
每个事件链在执行中会有上下文对象,这个对象会贯穿这个事件链。

View File

@@ -98,4 +98,6 @@ function MInput(props: MInputProps) {
由于可以很轻松的拿到store所以可以在任意地方进行修改数据。
将组件的value关联current的属性onChange去修改store这样就完成了个双向绑定。
将组件的value关联current的属性onChange去修改store这样就完成了个双向绑定。
注意如果你的右侧组件需要用到block以外的属性可能需要去判断是否处于弹窗模式。

View File

@@ -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为准。

View File

@@ -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;
}, []);
}, {});