setters - 设置器 API
@types IPublicApiSetters
@since v1.0.0
模块简介
负责注册设置器、管理设置器的 API。注册自定义设置器之后可以在物料中进行使用。
方法
getSetter
获取指定 setter
/**
* 获取指定 setter
* get setter by type
* @param type
* @returns
*/
getSetter(type: string): IPublicTypeRegisteredSetter | null;
相关类型:IPublicTypeRegisteredSetter
getSettersMap
获取已注册的所有 settersMap
/**
* 获取已注册的所有 settersMap
* get map of all registered setters
* @returns
*/
getSettersMap(): Map<string, IPublicTypeRegisteredSetter & {
type: string;
}>;
相关类型:IPublicTypeRegisteredSetter
registerSetter
注册一个 setter
/**
* 注册一个 setter
* register a setter
* @param typeOrMaps
* @param setter
* @returns
*/
registerSetter(
typeOrMaps: string | { [key: string]: IPublicTypeCustomView | IPublicTypeRegisteredSetter },
setter?: IPublicTypeCustomView | IPublicTypeRegisteredSetter | undefined
): void;
相关类型:
使用示例
注册官方内置 Setter 到设计器中
import { setters, skeleton } from '@alilc/lowcode-engine';
import { setterMap, pluginMap } from '@alilc/lowcode-engine-ext';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
const SetterRegistry = (ctx: IPublicModelPluginContext) => {
return {
name: 'ext-setters-registry',
async init() {
// 注册 setterMap
setters.registerSetter(setterMap);
// 注册插件
// 注册事件绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.EventBindDialog,
name: 'eventBindDialog',
props: {},
});
// 注册变量绑定面板
skeleton.add({
area: 'centerArea',
type: 'Widget',
content: pluginMap.VariableBindDialog,
name: 'variableBindDialog',
props: {},
});
},
};
}
SetterRegistry.pluginName = 'SetterRegistry';
await plugins.register(SetterRegistry);
开发自定义 Setter
AltStringSetter 代码如下:
import * as React from "react";
import { Input } from "@alifd/next";
import "./index.scss";
interface AltStringSetterProps {
// 当前值
value: string;
// 默认值
initialValue: string;
// setter 唯一输出
onChange: (val: string) => void;
// AltStringSetter 特殊配置
placeholder: string;
}
export default class AltStringSetter extends React.PureComponent<AltStringSetterProps> {
componentDidMount() {
const { onChange, value, defaultValue } = this.props;
if (value == undefined && defaultValue) {
onChange(defaultValue);
}
}
// 声明 Setter 的 title
static displayName = 'AltStringSetter';
render() {
const { onChange, value, placeholder } = this.props;
return (
<Input
value={value}
placeholder={placeholder || ""}
onChange={(val: any) => onChange(val)}
></Input>
);
}
}
开发完毕之后,注册 AltStringSetter 到设计器中:
import AltStringSetter from './AltStringSetter';
import { setters } from '@alilc/lowcode-engine';
const { registerSetter } = setters;
registerSetter('AltStringSetter', AltStringSetter);
注册之后,我们就可以在物料中使用了,其中核心配置如下:
{
"props": {
"isExtends": true,
"override": [
{
"name": "type",
"setter": "AltStringSetter"
}
]
}
}
完整配置如下:
{
"componentName": "Message",
"title": "Message",
"props": [
{
"name": "title",
"propType": "string",
"description": "标题",
"defaultValue": "标题"
},
{
"name": "type",
"propType": {
"type": "oneOf",
"value": [
"success",
"warning",
"error",
"notice",
"help",
"loading"
]
},
"description": "反馈类型",
"defaultValue": "success"
}
],
"configure": {
"props": {
"isExtends": true,
"override": [
{
"name": "type",
"setter": "AltStringSetter"
}
]
}
}
}