Engage 开放平台文档

# 组件设计原则

  • 全面采用 Flex 伸缩式布局，没有栅格系统
  • 规范化组件接口，尽可能减少组件入参，降低使用门槛
  • 贴近业务，固定布局与界面构成体系（View->Applet->Field）

# 组件接口描述方式

组件接口（Interface）一般包含 props（:xxx）、events（@xxx）、slots（#xxx）、methods 四种参数。大部分组件是直接通过 vuese 直接从组件定义文件（.vue）中抽取接口定义的。

# 基础组件库

包含各类基础组件，如按钮、Icon、表单、浮出框等。

# 基础组件

  • EBlock：最基础的布局元素，内置使用 Flex，可以很方便地进行定位、对其宽高自适应
  • EText：文本专用组件，支持文字溢出处理、超链接
  • EButton：按钮组件
  • EIcon：iconfont 组件

# 表单组件

  • EFormItem：表单项组件，封装校验提示与表单字段名称
  • EValidationMixin：表单项的值校验，如必填等
  • EInput：单行文本输入
  • ENumberInput：数字输入
  • ETextarea：多行文本，支持自动增高
  • ESelect：下拉框，支持无限滚动
  • ECheckbox：复选框
  • EOptionGroup：复选框组，支持多选
  • EDate：日期输入，支持日期范围、时间范围
  • ECascader：级联下拉框，支持多种选中模式
  • EUpload：图片、文件上传
  • ELov：静态选项下拉框，封装 ESelect
  • EPickList：动态选项下拉框，封装 ESelect
  • ESelectRow：跟 EPickList 很像，但专用于后端行数据的选择

# 弹出组件

  • EDialog：全屏通用弹出框，带蒙层
  • EAlert：提示、确认弹出框，通过 this.$e.alert() 等方法打开
  • EPopup：局部浮出框，无蒙层
  • EDropdown：下浮框，由锚点 + 浮出框构成，封装 EPopup
  • ETooltip：提示浮出框，封装 EPopup
  • EToast：全局提示框，一般用作接口消息提示

# 内容组件

# 进度组件

# 布局组件库

布局组件库是 Engage 特有的一种界面划分方式。在 Engage 的标准交互中，一个界面按照从大到小，分别由 View、Applet、Field 构成。其中：

  • View 表示整个页面（除去顶部导航栏）
  • Applet 表示 View（页面）中一个面板，通常对应一个实体。实体一般就是一张数据库表。
  • Field 表示 Applet 中的一个字段，通常对应实体的一个字段。

整个 View 的结构示例：

如上图，红色框是 View，蓝色框是 Applet，绿色框是 Field。中间的两个标签栏（Tabs）都属于 View 的一部分。

上例中，View 顶部的客户 Applet 展示的一种详情 Applet。当点击编辑按钮时，弹出框是另一个 Applet。如下图所示：

这里每个 Field 展示了其在编辑状态下的样子。

# EView

页面组件，即除了导航栏以外的其余部分，是 EApplet 的容器。支持很多模板，比如上-下布局、上-左下-右下布局等。

# EApplet

一种实体数据的展示方式，是 EField 的容器。支持很多模板，如列表、详情、新建、编辑等。

# EField

EField 有两种模式，查看状态和编辑状态。

  • EFieldGroup：两列式字段查看与编辑，可折叠，标题栏可选
  • EFieldLine：用于存放字段的行，水平布局，一般一行下放两个字段。
  • EField/input：EInput 的 Field 版

← @engage/fe-cli →