跳到主要内容

# 5. 画布详解

## 组件操作​

### 画布操作​

点击组件在右侧面板中能够显示出对应组件的属性配置选项

拖拽修改组件的排列顺序

拖拽时会在右侧提示当前的组件树。

### 组件控制​

点击组件右上角的复制按钮，或者按下 `ctrl + c` 再按下 `ctrl + v`，可以将其复制； 点击组件右上角的删除按钮，或者直接使用 `Delete` 键，可以将其删除。

### 选择组件切换​

可以用键盘上的按键切换组件选择：

- `↑` 向上选择组件
- `↓` 向下选择组件
- `←` 向左选择组件
- `→` 向右选择组件

可以 hover 到组件操作辅助区的第一项来选中组件的父级节点：

### 可扩展项简述​

快捷键、操作辅助区均可扩展。

## Slot 区块​

React 中，可以定义一个 prop 选项为 `JSXElement` 或 `(...args) => JSXElement` 的形式，这个形式在低代码画布中，被定义为 Slot，允许往其内部拖入组件，进行符合直觉的操作。

### 锁定 Slot​

您可以对 Slot 进行锁定操作，锁定后内部内容无法选中；

在组件树可以解除操作。

## 组件编辑态​

低代码引擎允许组件在编辑状态下表现得和渲染时不一样。Demo 中的布局组件就是用对应 API 完成布局的高级操作的。

它背后的实现有两种方法：

- 侵入型：组件编辑态下，会往组件内传入 `__designMode: 'design'`，可以在组件中进行相应处理；

- 双入口型：通过配置物料的 editUrls，加载专属于编辑态组件的物料。pro-layout 使用的是这种方式

        {
          "package": "@alifd/pro-layout",
          "version": "1.0.1-beta.6",
          "library": "AlifdProLayout",
          "urls": [
            "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/dist/AlifdProLayout.js",
            "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/dist/AlifdProLayout.css"
          ],
          "editUrls": [
            "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/view.js",
            "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/view.css"
          ]
        }