diff --git a/docs/protocol/prototype.mdx b/docs/protocol/prototype.mdx index 1050c46..a4e882b 100644 --- a/docs/protocol/prototype.mdx +++ b/docs/protocol/prototype.mdx @@ -57,27 +57,6 @@ } ``` -### 函数模板 - -当某个属性为函数类型时,且希望在 eventSetter 中快捷生成函数的模板代码时,可以使用 `template` 属性指定 - -```js -{ - name: 'Button', - props: [ - { - name: 'shape', - }, - { - name: 'onClick', - setter: 'eventSetter', - // {{content}} 为插值变量,会被替换为用户输入的内容,或选定的变量 - template: '(e) => {\n {{content}}\n}', - }, - ]; -} -``` - ### 自定义渲染列表 或某个属性为 renderProps 类型时,可以借助 `options` 属性配置 renderProps 的渲染函数模板 @@ -111,6 +90,54 @@ } ``` +### `renderSetter` 函数模板 + +当某个属性为 render props 类型时,且希望在 renderSetter 中快捷生成函数的模板代码时,可以使用 `template` 属性指定 + +```js +{ + name: 'TableColumn', + props: [ + { + name: 'render', + setter: 'renderSetter', + options: [ + { + label: '按钮组', + value: 'ButtonGroup', + renderBody: + '', + relatedImports: ['ButtonGroup', 'Button'], + }, + ] + // {{content}} 为插值变量,会被替换为 options 列表项中的 renderBody 内容 + template: '(value, record, index) => {\n {{content}}\n}', + }, + ]; +} +``` + +### `eventSetter/codeSetter` 函数模板 + +当某个属性为函数类型时,且希望在 eventSetter 中快捷生成函数的模板代码时,可以使用 `template` 属性指定 + +```js +{ + name: 'Button', + props: [ + { + name: 'shape', + }, + { + name: 'onClick', + setter: 'eventSetter', + // {{content}} 为插值变量,会被替换为用户输入的内容,或选定的变量 + template: '(e) => {\n {{content}}\n}', + }, + ]; +} +``` + ### 动态属性的展示 当组件需要依据某个属性值进行动态设置其他属性时,可以借助 `getProp` 实现控制: