---
title: setters - 设置器 API
sidebar_position: 10
---
> **@types** [IPublicApiSetters](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/setters.ts)
> **@since** v1.0.0
## 模å—简介
负责注册设置器ã€ç®¡ç†è®¾ç½®å™¨çš„ API。注册自定义设置器之åŽå¯ä»¥åœ¨ç‰©æ–™ä¸è¿›è¡Œä½¿ç”¨ã€‚
## 方法
### getSetter
获å–指定 setter
```typescript
/**
* 获å–指定 setter
* get setter by type
* @param type
* @returns
*/
getSetter(type: string): IPublicTypeRegisteredSetter | null;
```
相关类型：[IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts)
### getSettersMap
获å–已注册的所有 settersMap
```typescript
/**
* 获å–已注册的所有 settersMap
* get map of all registered setters
* @returns
*/
getSettersMap(): Map;
```
相关类型：[IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts)
### registerSetter
注册一个 setter
```typescript
/**
* 注册一个 setter
* register a setter
* @param typeOrMaps
* @param setter
* @returns
*/
registerSetter(
typeOrMaps: string | { [key: string]: IPublicTypeCustomView | IPublicTypeRegisteredSetter },
setter?: IPublicTypeCustomView | IPublicTypeRegisteredSetter | undefined
): void;
```
相关类型：
- [IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts)
- [IPublicTypeCustomView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/custom-view.ts)
## 使用示例
### 注册官方内置 Setter 到设计器ä¸
```typescript
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 代ç 如下：
```typescript
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 {
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 (
onChange(val)}
>
);
}
}
```
å¼€å‘完毕之åŽï¼Œæ³¨å†Œ AltStringSetter 到设计器ä¸ï¼š
```typescript
import AltStringSetter from './AltStringSetter';
import { setters } from '@alilc/lowcode-engine';
const { registerSetter } = setters;
registerSetter('AltStringSetter', AltStringSetter);
```
注册之åŽï¼Œæˆ‘们就å¯ä»¥åœ¨ç‰©æ–™ä¸ä½¿ç”¨äº†ï¼Œå…¶ä¸æ ¸å¿ƒé…置如下：
```typescript
{
"props": {
"isExtends": true,
"override": [
{
"name": "type",
"setter": "AltStringSetter"
}
]
}
}
```
完整é…置如下：
```typescript
{
"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"
}
]
}
}
}
```