diff --git a/packages/dooringx-doc/src/docs/2.2.md b/packages/dooringx-doc/src/docs/2.2.md index 716aab2..328ed3f 100644 --- a/packages/dooringx-doc/src/docs/2.2.md +++ b/packages/dooringx-doc/src/docs/2.2.md @@ -8,4 +8,6 @@ dooringx-lib 的事件是在eventCenter上,它上面会集成functionCenter与 在eventCenter中可以获取组件注册的时机。时机类似于组件生命周期一样,可以注册后在对应的时机进行调用。 -而functionCenter中的函数则会与时机结合,再由事件链对用户设定的队列进行统一处理。 \ No newline at end of file +而functionCenter中的函数则会与时机结合,再由事件链对用户设定的队列进行统一处理。 + +每个事件链在执行中会有上下文对象,这个对象会贯穿这个事件链。 \ No newline at end of file diff --git a/packages/dooringx-doc/src/docs/3.5.md b/packages/dooringx-doc/src/docs/3.5.md index 7a839ea..6fac5d4 100644 --- a/packages/dooringx-doc/src/docs/3.5.md +++ b/packages/dooringx-doc/src/docs/3.5.md @@ -98,4 +98,6 @@ function MInput(props: MInputProps) { 由于可以很轻松的拿到store,所以可以在任意地方进行修改数据。 -将组件的value关联current的属性,onChange去修改store,这样就完成了个双向绑定。 \ No newline at end of file +将组件的value关联current的属性,onChange去修改store,这样就完成了个双向绑定。 + +注意:如果你的右侧组件需要用到block以外的属性,可能需要去判断是否处于弹窗模式。 \ No newline at end of file diff --git a/packages/dooringx-doc/src/docs/3.8.md b/packages/dooringx-doc/src/docs/3.8.md index 004b1b0..2257d8e 100644 --- a/packages/dooringx-doc/src/docs/3.8.md +++ b/packages/dooringx-doc/src/docs/3.8.md @@ -1,5 +1,135 @@ --- -title: 函数开发 +title: 函数 sTitle: dooringx-lib插件开发 order: 16 ---- \ No newline at end of file +--- + + +## 函数导入 + +函数导入做成对象置入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为准。 diff --git a/packages/dooringx-example/src/plugin/formComponentModules.ts b/packages/dooringx-example/src/plugin/formComponentModules.ts index 00add4d..6228f6e 100644 --- a/packages/dooringx-example/src/plugin/formComponentModules.ts +++ b/packages/dooringx-example/src/plugin/formComponentModules.ts @@ -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 | ComponentClass const value = modulesFiles(modulePath); modules[name] = value.default; return modules; - }, []); + }, {});