组件

组件

组件是构成页面的基础元素，每个组件各自承担着特异的功能，比如图片组件可以呈现一张图片，文本组件可以展示一段文本。一系列组件按照一定的位置和样式排布在页面内，再加以一定的配置，最终就组成了页面。

组件按照抽象的粒度以及功能可以划分为两类：基础组件、合成组件。

在具体介绍各组件以前，先介绍一下组件相关的信息和操作。

组件信息

直接点击组件上的文字即可在中间的页面操作区显示组件详情一栏专门展示组件的信息

组件操作

添加

方法1. 直接点击组件。此操作会添加组件至当前激活(选中)组件的下一级。

方法2. 按住组件拖动至页面操作区某组件上方。此操作会添加组件至前述某组件的下级。

选中

方法1. 点击组件区下方的组件树某节点，节点高亮即该组件被选中

方法2. 点击页面操作区某组件，周围出现操作点即该组件被选中

方法3. 鼠标右键点击操作区某组件。同方法2的区别在于，此操作在选中组件的同时会打开右键菜单。

缩放

选中组件，按住四面八方8个操作点拖动即可放大缩小，若同时按住 shift 键，可按比例放大缩小，至目标大小，松开鼠标。

移动

选中组件，按住正中的操作点拖动，即可移动组件，至目标位置，松开鼠标。

旋转

选中组件，按住顶部绿色操作点环向拖动，即可旋转组件，至目标角度，松开鼠标。

删除

方法1. 鼠标移至组件树中待删除组件上方，出现一排操作按钮，点击垃圾桶状图标即可删除该组件及下级所有组件

方法2. 在页面操作区，鼠标右击组件，出现右键菜单，点击“删除”即可删除该组件及下级所有组件

其他配置和样式

除上述操作外，组件属性和样式设置也是制作页面的重要一环。

各个组件的配置项下文会详述，样式设置见后文：样式。

基础组件

基础组件是最基本的页面元素，如按钮、图片、文本、富文本等。下文一一展开说明。

按钮

按钮主要用于触发点击事件。

配置项：

【按钮文字】输入显示文字
【按钮type】根据使用场景，选择不同的按钮主题颜色
【点击事件】点击时触发的操作，默认的 目标对象 为当前节点（也可点击下拉框选择其他按钮节点来配置点击事件），然后选择点击后对应的方法。
【事件管理】可添加多种触发事件方式，如：click、dbclick、change、select、mousemove等。

注意：选择点击操作或配置事件方法时可能需要填写相应操作的参数

图片

配置项：

【图片】输入图片地址或上传图片文件
【点击操作】选择点击时触发的操作，同按钮组件

文字

配置项：

【文字内容】输入文本内容，文本样式可至样式-文本样式设置
【点击操作】选择点击时触发的操作，同按钮组件

富文本

配置项：

【文字内容】输入文本内容，文本可使用富文本编辑器编辑

音频

配置项：

【音频】输入音频地址或上传音频文件
【音频图标】输入图片地址或上传图片文件，用作音频组件的封面，音频播放状态下自动旋转
【自动播放】切换是否允许音频自动开始播放，注意，暂时对iOS设备无效
【显示默认播放按钮】切换是否显示默认播放控件
【循环播放】切换是否需要循环播放

输入框

配置项：

【默认值】输入输入框内默认的内容
【占位符】输入输入框内无内容时显示的文字
【类型】选择输入框输入内容的类型（文本、数字、密码）
【只读】切换输入框是否能被编辑
【最多】输入最多能输入多少个字符，-1为不限

合成组件

在有些相似的场景下，我们会重复的使用到一些功能块，那么我们可以将这些功能块封装成一个组件使我们的页面配置更方便、简单。在这里我们将多个基础组件组成的一个组件定义为合成组件。

如何生成合成组件

首先我们的页面都是由组件组成的，组件之间有上下级关系，也有同级关系。那么我们要想生成合成组件，可以直接选择一个层级的组件右键打开操作浮层，直接选择另存为合成组件即可，接下来我们就可以在左上角的合成组件tab栏来查看我们生成的合成组件，鼠标悬浮在合成组件上点击出现的使用按钮即可使用。