diff --git a/docs/zh-CN/components/code.md b/docs/zh-CN/components/code.md index c294782fe..436a4e482 100644 --- a/docs/zh-CN/components/code.md +++ b/docs/zh-CN/components/code.md @@ -102,6 +102,22 @@ language 支持从上下文获取数据 } ``` +## 最大高度 + +通过配置 `maxHeight` 可以实现最大高度,超出滚动 + +```schema +{ + "body": { + "type": "code", + "language": "javascript", + "className": "b-a", + "maxHeight": 200, + "value": "(function () {\n let amis = amisRequire('amis/embed');\n let amisJSON = {\n type: 'page',\n title: '表单页面',\n body: {\n type: 'form',\n mode: 'horizontal',\n api: '/saveForm',\n body: [\n {\n label: 'Name',\n type: 'input-text',\n name: 'name'\n },\n {\n label: 'Email',\n type: 'input-email',\n name: 'email'\n }\n ]\n }\n };\n let amisScoped = amis.embed('#root', amisJSON);\n})();" + } +} +``` + ## 自定义语言高亮 还可以通过 `customLang` 参数来自定义高亮,详情参考[示例](../../../examples/code)。 @@ -116,12 +132,13 @@ language 支持从上下文获取数据 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| ----------- | -------- | ------ | ---------------------------------- | -| className | `string` | | 外层 CSS 类名 | -| value | `string` | | 显示的颜色值 | -| name | `string` | | 在其他组件中,时,用作变量映射 | -| language | `string` | | 所使用的高亮语言,默认是 plaintext | -| tabSize | `number` | 4 | 默认 tab 大小 | -| editorTheme | `string` | 'vs' | 主题,还有 'vs-dark' | -| wordWrap | `string` | `true` | 是否折行 | +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | ------------------ | ------ | ---------------------------------- | +| className | `string` | | 外层 CSS 类名 | +| value | `string` | | 显示的颜色值 | +| name | `string` | | 在其他组件中,时,用作变量映射 | +| language | `string` | | 所使用的高亮语言,默认是 plaintext | +| tabSize | `number` | 4 | 默认 tab 大小 | +| editorTheme | `string` | 'vs' | 主题,还有 'vs-dark' | +| wordWrap | `string` | `true` | 是否折行 | +| maxHeight | `string`\|`number` | | 最大高度 | diff --git a/packages/amis/src/renderers/Code.tsx b/packages/amis/src/renderers/Code.tsx index 60c794987..59f8d5624 100644 --- a/packages/amis/src/renderers/Code.tsx +++ b/packages/amis/src/renderers/Code.tsx @@ -142,6 +142,11 @@ export interface CodeSchema extends BaseSchema { * 使用的标签,默认多行使用pre,单行使用code */ wrapperComponent?: string; + + /** + * 最大高度,单位为px + */ + maxHeight?: number; } export interface CodeProps @@ -320,7 +325,8 @@ export default class Code extends React.Component { const sourceCode = getPropValue(this.props); const { className, - style, + maxHeight, + style = {}, classnames: cx, editorTheme, customLang, @@ -336,6 +342,11 @@ export default class Code extends React.Component { this.customLang = customLang; } + if (maxHeight) { + style.maxHeight = style.maxHeight || maxHeight; + style.overflow = 'auto'; + } + return (