157 lines
4.4 KiB
Markdown
157 lines
4.4 KiB
Markdown
|
---
|
|||
|
|
title: 左侧组件
|
|||
|
|
sTitle: dooringx-lib插件开发
|
|||
|
|
order: 11
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 插件导入
|
|||
|
|
|
|||
|
|
左侧组件要至于对象的LeftRegistMap中。
|
|||
|
|
|
|||
|
|
左侧组件支持同步导入或者异步导入。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
const LeftRegistMap: LeftRegistComponentMapItem[] = [
|
|||
|
|
{
|
|||
|
|
type: 'basic',
|
|||
|
|
component: 'button',
|
|||
|
|
img: 'icon-anniu',
|
|||
|
|
displayName: '按钮',
|
|||
|
|
urlFn: () => import('./registComponents/button'),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
如果需要异步导入组件，则需要填写urlFn，需要一个返回promise的函数。也可以支持远程载入组件，只要webpack配上就行了。
|
|||
|
|
|
|||
|
|
如果需要同步导入组件，则需要将组件放入配置项的initComponentCache中，这样在载入时便会注册进componentRegister里。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
initComponentCache: {
|
|||
|
|
modalMask: { component: MmodalMask },
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 组件编写
|
|||
|
|
|
|||
|
|
组件需要导出一个由ComponentItemFactory生成的对象。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
const MButton = new ComponentItemFactory(
|
|||
|
|
'button',
|
|||
|
|
'按钮',
|
|||
|
|
{
|
|||
|
|
style: [
|
|||
|
|
createPannelOptions<FormMap, 'input'>('input', {
|
|||
|
|
receive: 'text',
|
|||
|
|
label: '文字',
|
|||
|
|
text: 'yehuozhili',
|
|||
|
|
}),
|
|||
|
|
],
|
|||
|
|
animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
|
|||
|
|
actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
props: {
|
|||
|
|
...
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
(data, context, store, config) => {
|
|||
|
|
return <ButtonTemp data={data} store={store} context={context} config={config}></ButtonTemp>;
|
|||
|
|
},
|
|||
|
|
true
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
export default MButton;
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
其中第一个参数为组件注册名，第二个参数用来展示使用。
|
|||
|
|
|
|||
|
|
|
|||
|
|
第三个参数用来配置右侧面板的配置项组件。其中键为右侧面板的分类，值为配置项组件数组。
|
|||
|
|
|
|||
|
|
第四个参数会配置组件的初始值，特别注意的是，制作组件必须要有初始宽度（非由内容撑开），否则会在适配时产生问题。
|
|||
|
|
|
|||
|
|
第五个参数是个函数，你将获得配置项中的receive属性（暂且都默认该配置为receive）传来的配置，比如上例中receive的是text，则该函数中data里会收到该字段。
|
|||
|
|
|
|||
|
|
context一般只有preview和edit，用来进行环境判断。
|
|||
|
|
|
|||
|
|
config可以拿到所有数据，用来制作事件时使用。
|
|||
|
|
|
|||
|
|
第六个参数resize 是为了判断是否能进行缩放，当为false时，无法进行缩放。
|
|||
|
|
|
|||
|
|
第七个参数needPosition，某些组件移入画布后会默认采取拖拽的落点，该配置项默认为true，为false时将使用组件自生top和left定位来放置。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 事件注册
|
|||
|
|
|
|||
|
|
### 时机注册
|
|||
|
|
|
|||
|
|
前面说了事件有时机和函数，所以组件内可以使用hook注册时机：
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
|
|||
|
|
useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
useDynamicAddEventCenter第一个参数是render的四个参数组成的对象。第二个参数是注册的时机名，必须跟id相关，这是约定，否则多个组件可能会导致名称冲突，并且方便查找该时机。
|
|||
|
|
|
|||
|
|
注册完时机后，你需要将时机放入对应的触发位置上，比如这个button的点击执行时机就放到onclick中：
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
<Button
|
|||
|
|
onClick={() => {
|
|||
|
|
eventCenter.runEventQueue(`${pr.data.id}-click`, pr.config);
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
yehuozhili
|
|||
|
|
</Button>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
其中第一个参数则为注册的时机名，第二个为render函数中最后个参数config
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 函数注册
|
|||
|
|
|
|||
|
|
函数由组件抛出，可以加载到事件链上。比如，注册个改变文本函数，那么我可以在任意组件的时机中去调用该函数，从而触发该组件改变文本。
|
|||
|
|
|
|||
|
|
函数注册需要放入useEffect中，在组件卸载时需要卸载函数！否则会导致函数越来越多。
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
useEffect(() => {
|
|||
|
|
const functionCenter = eventCenter.getFunctionCenter();
|
|||
|
|
const unregist = functionCenter.register(
|
|||
|
|
`${pr.data.id}+改变文本函数`,
|
|||
|
|
async (ctx, next, config, args, _eventList, iname) => {
|
|||
|
|
const userSelect = iname.data;
|
|||
|
|
const ctxVal = changeUserValue(
|
|||
|
|
userSelect['改变文本数据源'],
|
|||
|
|
args,
|
|||
|
|
'_changeval',
|
|||
|
|
config,
|
|||
|
|
ctx
|
|||
|
|
);
|
|||
|
|
const text = ctxVal[0];
|
|||
|
|
setText(text);
|
|||
|
|
next();
|
|||
|
|
},
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
name: '改变文本数据源',
|
|||
|
|
data: ['ctx', 'input', 'dataSource'],
|
|||
|
|
options: {
|
|||
|
|
receive: '_changeval',
|
|||
|
|
multi: false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
);
|
|||
|
|
return () => {
|
|||
|
|
unregist();
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
函数中参数与配置见后面函数开发。
|