mirror of
https://github.com/NetEase/tango.git
synced 2026-09-17 16:38:46 +08:00
82 lines
4.4 KiB
Plaintext
82 lines
4.4 KiB
Plaintext
# 属性设置器
|
|
|
|
属性设置器用于在配置面板中展示特定配置项的配置逻辑。Tango 内置了多种标准的属性设置器，对于一些特殊场景，内置的属性设置器可能无法满足你的需要，此时开发者可以扩展自己的属性设置。
|
|
|
|
## 内置属性设置器
|
|
|
|
| 设置器名 | 接收值类型 | 设置器说明 | 可配置项 |
|
|
| ----------------- | ------------------------------------ | -------------------------- | ------------------ |
|
|
| eventSetter | expression | 动作函数或事件监听器设置器 | |
|
|
| actionListSetter | | ActionList 的 value 设置器 | |
|
|
| boolSetter | boolean | 布尔值设置器 | |
|
|
| choiceSetter | `{ label: string, value: string }[]` | RadioGroup 设置器 | - options 选项列表 |
|
|
| pickerSetter | `{ label: string, value: string }[]` | 下拉值设置器 | - options 选项列表 |
|
|
| colorSetter | string | 色彩 | |
|
|
| dateSetter | string | 日期设置器 | |
|
|
| dateRangeSetter | `string[]` | 日期范围设置器 | |
|
|
| timeSetter | `string` | 时间设置器 | |
|
|
| timeRangeSetter | `string[]` | 时间范围设置器 | |
|
|
| expressionSetter | expression | 表达式设置器 | |
|
|
| jsonSetter | json expression | JSON 表达式设置器 | |
|
|
| jsxSetter | jsx expression | JSX 设置器 | |
|
|
| iconSetter | string | Icon 组件设置器 | |
|
|
| iconTypeSetter | string | Icon 组件类型设置器 | |
|
|
| numberSetter | number | 数字类型设置器 | |
|
|
| textSetter | string | 文本设置器 | |
|
|
| textAreaSetter | string | 文本域设置器 | |
|
|
| modelSetter | string | 变量绑定设置器 | |
|
|
| enumSetter | enum | 枚举值设置器 | |
|
|
| sliderSetter | number | 滑块设置器 | |
|
|
| listSetter | `object[]` | 列表值设置器 | |
|
|
| renderPropsSetter | Function | render props 设置器 | |
|
|
| imageSetter | string | 云鹿图片设置器 | |
|
|
|
|
## 注册自定义属性设置器
|
|
|
|
### 属性设置器的实现标准
|
|
|
|
属性设置器组件是一个标准的受控型表单组件，开发者所开发的组件只需要暴露 `value` 和 `onChange(value)` 两个属性让属性面板的表单容器进行控制即可。
|
|
|
|
例如，我们可以实现一个简单的字符串设置器 StringSetter，其实现如下：
|
|
|
|
```jsx
|
|
function StringSetter({ value, onChange, ...rest }) {
|
|
const handleChange = (e) => {
|
|
onChange(e.target.value);
|
|
};
|
|
return <input value={value} onChange={handleChange} />;
|
|
}
|
|
```
|
|
|
|
### 注册属性设置器
|
|
|
|
注册属性设置器非常简单，只需要借助设置器暴露出来的 `registerSetter` 即可。
|
|
|
|
```jsx
|
|
import { registerSetter } from '@music163/tango-designer';
|
|
|
|
// 注册自定义 setter
|
|
registerSetter({
|
|
name: 'stringSetter',
|
|
component: StringSetter,
|
|
});
|
|
```
|
|
|
|
### 使用自定义的属性设置器
|
|
|
|
在组件的物料协议中直接声明对应的属性设置器名称即可。例如：
|
|
|
|
```jsx
|
|
const prototype = {
|
|
name: 'PageHeader',
|
|
title: 'PageHeader',
|
|
props: [
|
|
{
|
|
name: 'title',
|
|
title: '标题',
|
|
setter: 'stringSetter',
|
|
},
|
|
],
|
|
};
|
|
```
|