「组件」Dialog

旧名称依然可用：DynamicDialog

import { DynamicDialog } from 'web';     // 旧版本
import { Dialog } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 资源解析

配置信息$dialog的示例如（String模式）：

title,okText,cancelText,visible,width,maskClosable,onOk,component

3.2. 关于$footer

只有okText属性没有传值时，$footer设置的内容才会生效，也就是说如果要定制footer，那么需要将okText设置 为空字符串""。

3.3. 关于onOk

onOk在不传入rxOk外层函数时会直接触发Ux.connectId去点击链接的onOk元素的onClick事件，如果传入了 rxOk则默认的链接点击行为会被废弃，而使用外层属性。

「组件」DialogButton

import { DialogButton } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 关于子组件的计算

1. 过滤掉的属性表：
   • $disabled
   • $button
   • $dialog
   • $mode
   • $inited
   • $content
2. 其他属性再追加rxClose专用方法关闭窗口进行继承。
3. 内置窗口使用Dialog组件替换原生的<Modal/>操作，来完成状态注入。

3.2. 模式解析

$mode设置的值生成三种不同的窗口：

• DIALOG：弹出窗口组件<Modal/>。
• DRAWER：抽屉窗口组件<Drawer/>。
• POPOVER：浮游窗口组件<Popover/>。

3.3. 状态说明

• $loading：组件是否处于加载状态，当前按钮的加载状态等价于提交状态，这个值会传递给子组件。
• visible：用于记录当前组件的现实和隐藏的专用属性，注意这个属性和Zero Ui规范中的$visible有一定区别，原因是这个组件是旧组件，历史太长，暂时没做更改。

「组件」DialogMenu

import { DialogMenu } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 单个选项结构

{
    "button": "按钮配置",
    "dialog": "窗口配置",
    "component": "使用的组件key，对应$content变量",
    "confirm": "删除专用，带有浮游提示窗口（是否）",
    "init": "布尔值，是否给子组件传入初始化数据信息。"
}

3.2. 三种执行器

• DIRECT：直接执行函数的执行器。
• DIALOG：窗口执行器，设置显示/隐藏专用执行器。
• CONFIRM：直接应用Modal.confirm的执行器。

3.3. 初始化数据渲染器

1. 先从props中读取$inited变量作为表单初始化变量。
2. 判断init的值，过滤
   • $disabled
   • $disabledItems
   • $inited
   • $items
   • $button
   • $functions
   • $content
   • $mode
3. 为$inited和$parent赋值
   • 带_前缀的字段直接放到$inited中。
   • $parent中存储的就是$inited数据。
4. 追加rxClose专用方法进入子组件。

3.4. 状态说明

• $loading：组件是否处于加载状态，当前按钮的加载状态等价于提交状态，这个值会传递给子组件。
• visible：此处是一个Object类型，记录了每个组件的显示和隐藏状态。

「组件」PageCard

import { PageCard } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 工具栏

整个PageCard工具栏分为三部分

如果传入了$extra变量，那么这个Jsx元素会替换掉$rightVisible和$backVisible两个区域的组件。

3.2. 防重复提交

左侧和右侧的按钮通常会使用Ux.connectId方法触发按钮点击动作，并且会根据$submitting的值来判断 当前按钮是否处于加载状态，即使是不在当前组件的子组件中，也可以直接使用该值来渲染按钮的加载。

3.3. 禁用状态

$config变量中存储了left和right中每一个按钮的key信息，而$disabled则存储了禁用启用状态（外置传入）。

假设$disabled包含了值：

{
    "key1": true,
    "key2": true
}

上述配置会禁用key1和key2的按钮信息。

「组件」Rectangle

import { Rectangle } from 'web';

1. 生命周期

2. 属性说明

「组件」ColumnUser

import { ColumnUser } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 关于Ajax加载

• 该组件位于<Table/>元素中渲染特定列USER专用，此处有个误区就是列的名称，这里应用了ColumnUser是因为最早的设计中它是为了加载创建人、更新人而量身定制的列，而后续更改过后，依旧维持了这个名字，没有更改。
• 该组件中的Ajax只支持GET方法，内部调用Ux.ajaxGet(uri,{key});方法执行相关操作，这也是该列的限制。

3.2. 关于Icon计算

1. 如果state中计算的$system=true，则直接设置图标为type = setting为图标类型，颜色#7D7D7D。
2. 相反则直接读取$icon图标信息，如果没有提供则直接使用type = user为图标类型，颜色#CD2990。

图标类型的格式为：

<type>,<color>

图标的尺寸不能设置，只能是16，但是颜色可以根据提供的$icon来进行设置。

「组件」G6Editor

1. 生命周期

2. 属性说明

「组件」G6Viewer

1. 生命周期

2. 属性说明

「组件」Graphic2

import { Graphic2 } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. $gFn函数

$gFn是一个必须传入的函数，用于构造graphic引用，这个引用可直接调用下边API执行图形渲染， 目前可绑定的函数如：

• Ux.g2Bar：饼图构造函数。

「组件」LoadingAlert

import { LoadingAlert } from 'web';

1. 生命周期

2. 属性说明

2.1. $alert结构示例

{
    "message": "标题文字",
    "description": [],
    "type": "配置的type",
    "hideIcon": "是否隐藏图标"
}

3. 组件核心点

3.1. description处理

1. 如果类型是String，则直接将description作为渲染文本基础元素来处理。
2. 如果类型是Array，长度为1，则直接将第一个元素作为渲染文本来处理。
3. 如果类型是Array，长度大于1，则使用<ul/>的列表方式渲染多行文本。

3.2. type执行流程

1. 优先选择props中的$type属性。
2. 然后使用props中$alert中的type属性。
3. 如果都没传入则使用默认值info。

3.3. icon计算流程

1. 优先选择props中的$icon属性。
2. 然后使用props中$alert中的icon属性。
3. 如果1和2都读取不了任何数据，则为无图标模式，否则为有图标模式。

3.4. 其他

1. 组件外层有<div/>元素执行封装。
2. 计算<Alert/>的属性后传入，其中description和icon都可直接使用Jsx语法直接渲染。
3. 最外层的className有两种选择：
   1. showIcon = true有图标模式：web-alert-iconlist。
   2. showIcon = true无图标模式：web-alert-list。
   3. showIcon = false纯模式：web-alert-text。

「组件」LoadingContent

import { LoadingContent } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 资源文件

文件位置：cab/<LANGUAGE>/economy/web/LoadingContent.json

文件内容：

{
     "loading": "数据加载中……"
}

3.2. 属性计算

传入的三个属性主要是为计算最外层<div/>的style属性，

「组件」Navigation

旧名称依然可用：PagerHeader

import { PagerHeader } from 'web';     // 旧版本
import { Navigation } from 'web';

1. 生命周期

2. 属性说明

面包屑导航渲染，通常用于主界面的二级面包屑导航，链接会禁用<a/>的href导航而采用react-router中的路由导航功能。

「组件」NavSwallow

import { NavSwallow } from 'web';

1. 生命周期

2. 属性说明

3. 组件核心点

3.1. 特定className的值