Skip to content

Commit 8b8ed32

Browse files
committed
fix: update prototype guide
1 parent 49c2c25 commit 8b8ed32

File tree

1 file changed

+48
-21
lines changed

1 file changed

+48
-21
lines changed

docs/protocol/prototype.mdx

+48-21
Original file line numberDiff line numberDiff line change
@@ -57,27 +57,6 @@
5757
}
5858
```
5959

60-
### 函数模板
61-
62-
当某个属性为函数类型时,且希望在 eventSetter 中快捷生成函数的模板代码时,可以使用 `template` 属性指定
63-
64-
```js
65-
{
66-
name: 'Button',
67-
props: [
68-
{
69-
name: 'shape',
70-
},
71-
{
72-
name: 'onClick',
73-
setter: 'eventSetter',
74-
// {{content}} 为插值变量,会被替换为用户输入的内容,或选定的变量
75-
template: '(e) => {\n {{content}}\n}',
76-
},
77-
];
78-
}
79-
```
80-
8160
### 自定义渲染列表
8261

8362
或某个属性为 renderProps 类型时,可以借助 `options` 属性配置 renderProps 的渲染函数模板
@@ -111,6 +90,54 @@
11190
}
11291
```
11392

93+
### `renderSetter` 函数模板
94+
95+
当某个属性为 render props 类型时,且希望在 renderSetter 中快捷生成函数的模板代码时,可以使用 `template` 属性指定
96+
97+
```js
98+
{
99+
name: 'TableColumn',
100+
props: [
101+
{
102+
name: 'render',
103+
setter: 'renderSetter',
104+
options: [
105+
{
106+
label: '按钮组',
107+
value: 'ButtonGroup',
108+
renderBody:
109+
'<ButtonGroup><Button>button1</Button><Button>button2</Button></ButtonGroup>',
110+
relatedImports: ['ButtonGroup', 'Button'],
111+
},
112+
]
113+
// {{content}} 为插值变量,会被替换为 options 列表项中的 renderBody 内容
114+
template: '(value, record, index) => {\n {{content}}\n}',
115+
},
116+
];
117+
}
118+
```
119+
120+
### `eventSetter/codeSetter` 函数模板
121+
122+
当某个属性为函数类型时,且希望在 eventSetter 中快捷生成函数的模板代码时,可以使用 `template` 属性指定
123+
124+
```js
125+
{
126+
name: 'Button',
127+
props: [
128+
{
129+
name: 'shape',
130+
},
131+
{
132+
name: 'onClick',
133+
setter: 'eventSetter',
134+
// {{content}} 为插值变量,会被替换为用户输入的内容,或选定的变量
135+
template: '(e) => {\n {{content}}\n}',
136+
},
137+
];
138+
}
139+
```
140+
114141
### 动态属性的展示
115142

116143
当组件需要依据某个属性值进行动态设置其他属性时,可以借助 `getProp` 实现控制:

0 commit comments

Comments
 (0)