mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-11 18:42:56 +00:00
docs: add config options doc
This commit is contained in:
liujuping
林熠
parent
3b36926c70
commit
e1dd8e0c5a
285
docs/docs/api/configOptions.md
Normal file
285
docs/docs/api/configOptions.md
Normal file
@ -0,0 +1,285 @@
|
|||||||
|
---
|
||||||
|
title: config options - 配置列表
|
||||||
|
sidebar_position: 13
|
||||||
|
---
|
||||||
|
|
||||||
|
> **@types** [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts)<br/>
|
||||||
|
|
||||||
|
## 配置方式
|
||||||
|
|
||||||
|
#### init API
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { init } from '@alilc/lowcode-engine';
|
||||||
|
|
||||||
|
init(document.getElementById('engine'), {
|
||||||
|
enableCondition: false,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
[**init api**](./init)
|
||||||
|
|
||||||
|
#### config API
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { config } from '@alilc/lowcode-engine';
|
||||||
|
|
||||||
|
config.set('enableCondition', false)
|
||||||
|
```
|
||||||
|
|
||||||
|
[**config api**](./config)
|
||||||
|
|
||||||
|
## 配置详情
|
||||||
|
|
||||||
|
> 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts)
|
||||||
|
|
||||||
|
|
||||||
|
### 画布
|
||||||
|
|
||||||
|
#### locale - 语言
|
||||||
|
|
||||||
|
`@type {string}`、`@default {zh-CN}`
|
||||||
|
|
||||||
|
语言
|
||||||
|
|
||||||
|
#### device - 设备类型
|
||||||
|
|
||||||
|
`@type {string}`
|
||||||
|
|
||||||
|
引擎默认支持的 device 类型有 `default`、`mobile`、`iphonex`、`iphone6`。
|
||||||
|
|
||||||
|
插件 `@alilc/lowcode-plugin-simulator-select` 支持的 device 类型有 `default`、`phone`、`tablet`、`desktop`。
|
||||||
|
|
||||||
|
如果需要自定义的 device 类型，需要补充 device 类型对应的样式，例如 device 为 phone 时，需要补充样式如下：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.lc-simulator-device-phone {
|
||||||
|
top: 16px;
|
||||||
|
bottom: 16px;
|
||||||
|
left: 50%;
|
||||||
|
width: 375px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### deviceClassName
|
||||||
|
|
||||||
|
`@type {string}`
|
||||||
|
|
||||||
|
指定初始化的 deviceClassName，挂载到画布的顶层节点上
|
||||||
|
|
||||||
|
#### appHelper
|
||||||
|
|
||||||
|
与 react-renderer 的 appHelper 一致，https://lowcode-engine.cn/site/docs/guide/expand/runtime/renderer#apphelper
|
||||||
|
|
||||||
|
|
||||||
|
#### enableCondition
|
||||||
|
|
||||||
|
`@type {boolean}`
|
||||||
|
|
||||||
|
是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示
|
||||||
|
|
||||||
|
#### disableAutoRender
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
关闭画布自动渲染，在资产包多重异步加载的场景有效
|
||||||
|
|
||||||
|
#### renderEnv - 渲染器类型
|
||||||
|
|
||||||
|
渲染器类型
|
||||||
|
|
||||||
|
`@type {string}`、`@default {react}`
|
||||||
|
|
||||||
|
#### simulatorUrl
|
||||||
|
|
||||||
|
`@type {string[]}`
|
||||||
|
|
||||||
|
设置 simulator 相关的 url
|
||||||
|
|
||||||
|
#### enableStrictNotFoundMode
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件
|
||||||
|
|
||||||
|
### 编排
|
||||||
|
|
||||||
|
#### focusNodeSelector - 指定根组件
|
||||||
|
|
||||||
|
配置指定节点为根组件
|
||||||
|
|
||||||
|
类型定义
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
focusNodeSelector?: (rootNode: Node) => Node;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### supportVariableGlobally - 全局变量配置
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
设置所有属性支持变量配置
|
||||||
|
|
||||||
|
开启拖拽组件时，即将被放入的容器是否有视觉反馈
|
||||||
|
|
||||||
|
#### customizeIgnoreSelectors - 点击忽略
|
||||||
|
|
||||||
|
定制画布中点击被忽略的 selectors
|
||||||
|
|
||||||
|
类型定义:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[], e: MouseEvent) => string[];
|
||||||
|
```
|
||||||
|
|
||||||
|
默认值:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
() => {
|
||||||
|
return [
|
||||||
|
'.next-input-group',
|
||||||
|
'.next-checkbox-group',
|
||||||
|
'.next-checkbox-wrapper',
|
||||||
|
'.next-date-picker',
|
||||||
|
'.next-input',
|
||||||
|
'.next-month-picker',
|
||||||
|
'.next-number-picker',
|
||||||
|
'.next-radio-group',
|
||||||
|
'.next-range',
|
||||||
|
'.next-range-picker',
|
||||||
|
'.next-rating',
|
||||||
|
'.next-select',
|
||||||
|
'.next-switch',
|
||||||
|
'.next-time-picker',
|
||||||
|
'.next-upload',
|
||||||
|
'.next-year-picker',
|
||||||
|
'.next-breadcrumb-item',
|
||||||
|
'.next-calendar-header',
|
||||||
|
'.next-calendar-table',
|
||||||
|
'.editor-container', // 富文本组件
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### enableCanvasLock
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
打开画布的锁定操作
|
||||||
|
|
||||||
|
#### enableLockedNodeSetting
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效
|
||||||
|
|
||||||
|
#### enableMouseEventPropagationInCanvas
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
鼠标事件在画布中是否允许冒泡
|
||||||
|
|
||||||
|
#### enableReactiveContainer
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
#### disableDetecting
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
关闭拖拽组件时的虚线响应，性能考虑
|
||||||
|
|
||||||
|
|
||||||
|
#### disableDefaultSettingPanel
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
禁止默认的设置面板
|
||||||
|
|
||||||
|
#### disableDefaultSetters
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
禁止默认的设置器
|
||||||
|
|
||||||
|
#### stayOnTheSameSettingTab
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
当选中节点切换时，是否停留在相同的设置 tab 上
|
||||||
|
|
||||||
|
#### hideSettingsTabsWhenOnlyOneItem
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
是否在只有一个 item 的时候隐藏设置 tabs
|
||||||
|
|
||||||
|
#### thisRequiredInJSE
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {true}`
|
||||||
|
|
||||||
|
JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false
|
||||||
|
|
||||||
|
### 应用级设计器
|
||||||
|
|
||||||
|
#### enableWorkspaceMode - 应用级设计模式
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {false}`
|
||||||
|
|
||||||
|
开启应用级设计模式
|
||||||
|
|
||||||
|
#### enableAutoOpenFirstWindow
|
||||||
|
|
||||||
|
`@type {boolean}` `@default {true}`
|
||||||
|
|
||||||
|
应用级设计模式下，自动打开第一个窗口
|
||||||
|
|
||||||
|
#### workspaceEmptyComponent
|
||||||
|
|
||||||
|
应用级设计模式下，当窗口为空时，展示的占位组件
|
||||||
|
|
||||||
|
### 定制组件
|
||||||
|
|
||||||
|
#### faultComponent
|
||||||
|
|
||||||
|
组件渲染错误时的占位组件
|
||||||
|
|
||||||
|
#### notFoundComponent
|
||||||
|
|
||||||
|
组件不存在时的占位组件
|
||||||
|
|
||||||
|
#### loadingComponent - loading 组件
|
||||||
|
|
||||||
|
自定义 loading 组件
|
||||||
|
|
||||||
|
### 其他
|
||||||
|
|
||||||
|
#### enableStrictPluginMode
|
||||||
|
|
||||||
|
`@type {boolean}`
|
||||||
|
|
||||||
|
开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项
|
||||||
|
|
||||||
|
#### requestHandlersMap
|
||||||
|
|
||||||
|
数据源引擎的请求处理器映射
|
||||||
|
|
||||||
|
#### customPluginTransducer
|
||||||
|
|
||||||
|
插件处理中间件，方便提供插件调试能力
|
||||||
|
|
||||||
|
类型定义
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
customPluginTransducer: async (originPlugin: IPublicTypePlugin, ctx: IPublicModelPluginContext, options): IPublicTypePlugin;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### defaultOutlinePaneProps
|
||||||
|
|
||||||
|
`@type {object}`
|
||||||
|
|
||||||
|
大纲树插件面板默认 props
|
||||||
|
|
||||||
|
|
||||||
@ -17,97 +17,7 @@ sidebar_position: 10
|
|||||||
function init(container?: Element, options?: IPublicTypeEngineOptions): void
|
function init(container?: Element, options?: IPublicTypeEngineOptions): void
|
||||||
```
|
```
|
||||||
|
|
||||||
**初始化引擎的参数**
|
[**初始化引擎配置参数列表**](./configOptions)
|
||||||
|
|
||||||
```typescript
|
|
||||||
interface IPublicTypeEngineOptions {
|
|
||||||
/**
|
|
||||||
* 指定初始化的 device
|
|
||||||
*/
|
|
||||||
device?: 'default' | 'mobile';
|
|
||||||
/**
|
|
||||||
* 指定初始化的 deviceClassName，挂载到画布的顶层节点上
|
|
||||||
*/
|
|
||||||
deviceClassName?: string;
|
|
||||||
/**
|
|
||||||
* 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示
|
|
||||||
*/
|
|
||||||
enableCondition?: boolean;
|
|
||||||
/**
|
|
||||||
* 开启拖拽组件时，即将被放入的容器是否有视觉反馈，默认值：false
|
|
||||||
*/
|
|
||||||
enableReactiveContainer?: boolean;
|
|
||||||
/**
|
|
||||||
* 关闭画布自动渲染，在资产包多重异步加载的场景有效，默认值：false
|
|
||||||
*/
|
|
||||||
disableAutoRender?: boolean;
|
|
||||||
/**
|
|
||||||
* 打开画布的锁定操作，默认值：false
|
|
||||||
*/
|
|
||||||
enableCanvasLock?: boolean;
|
|
||||||
/**
|
|
||||||
* 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效，默认值为：false
|
|
||||||
*/
|
|
||||||
enableLockedNodeSetting?: boolean;
|
|
||||||
/**
|
|
||||||
* 开启画布上的鼠标事件的冒泡，默认值：false
|
|
||||||
*/
|
|
||||||
enableMouseEventPropagationInCanvas?: boolean;
|
|
||||||
/**
|
|
||||||
* 关闭拖拽组件时的虚线响应，性能考虑，默认值：false
|
|
||||||
*/
|
|
||||||
disableDetecting?: boolean;
|
|
||||||
/**
|
|
||||||
* 定制画布中点击被忽略的 selectors，默认值：undefined
|
|
||||||
*/
|
|
||||||
customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[]) => string[];
|
|
||||||
/**
|
|
||||||
* 禁止默认的设置面板，默认值：false
|
|
||||||
*/
|
|
||||||
disableDefaultSettingPanel?: boolean;
|
|
||||||
/**
|
|
||||||
* 禁止默认的设置器，默认值：false
|
|
||||||
*/
|
|
||||||
disableDefaultSetters?: boolean;
|
|
||||||
/**
|
|
||||||
* 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false
|
|
||||||
*/
|
|
||||||
stayOnTheSameSettingTab?: boolean;
|
|
||||||
/**
|
|
||||||
* 自定义 loading 组件
|
|
||||||
*/
|
|
||||||
loadingComponent?: ComponentType;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @default true
|
|
||||||
* JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false
|
|
||||||
*/
|
|
||||||
thisRequiredInJSE?: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @default false
|
|
||||||
* >= 1.0.14
|
|
||||||
* 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件
|
|
||||||
*/
|
|
||||||
enableStrictNotFoundMode?: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 配置指定节点为根组件
|
|
||||||
* >= 1.0.15
|
|
||||||
*/
|
|
||||||
focusNodeSelector?: (rootNode: Node) => Node;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 工具类扩展
|
|
||||||
*/
|
|
||||||
appHelper?: {
|
|
||||||
utils?: {};
|
|
||||||
}
|
|
||||||
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
> 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts)
|
|
||||||
|
|
||||||
|
|
||||||
## 使用示例
|
## 使用示例
|
||||||
@ -126,25 +36,6 @@ import { init } from '@alilc/lowcode-engine';
|
|||||||
init({
|
init({
|
||||||
device: 'mobile',
|
device: 'mobile',
|
||||||
});
|
});
|
||||||
```
|
|
||||||
### device 参数详细说明
|
|
||||||
|
|
||||||
引擎默认支持的 device 类型有 `default`、`mobile`、`iphonex`、`iphone6`。
|
|
||||||
|
|
||||||
插件 `@alilc/lowcode-plugin-simulator-select` 支持的 device 类型有 `default`、`phone`、`tablet`、`desktop`。
|
|
||||||
|
|
||||||
如果需要自定义的 device 类型，需要补充 device 类型对应的样式，例如 device 为 phone 时，需要补充样式如下：
|
|
||||||
|
|
||||||
```css
|
|
||||||
.lc-simulator-device-phone {
|
|
||||||
top: 16px;
|
|
||||||
bottom: 16px;
|
|
||||||
left: 50%;
|
|
||||||
width: 375px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 使用 utils 第三方工具扩展
|
### 使用 utils 第三方工具扩展
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user