Status状态组件

2025-03-08 10:57:40首发，1周前更新

status表示状态，比如：当前任务有消息、板块有消息、板块有错误、板块有警告等。

Status状态组件 1周前更新

前言

在表格或列表中，需要表示当前任务或板块的状态，通常会用色块、图标或显目文本加以区分；我们可通过ax-status组件来表示这种状态。

本框架的status组件主要有两个部分构成，指示灯+文本，其中文本是选填的。

简单使用

ax-status标签即表示本框架的状态组件，最简单的用法便是直接插入空白节点即可表达一个普通状态（有消息的状态）。

输出
HTML

```
                
                
            
```

使用标题

通过属性label设置标题，或者直接将标题写在节点内。

如果有label属性，但是没有填值则会使用默认文本。

输出
HTML

自定义文本
```
                
                
            
```

使用类型

通过type设置圆点类型，可选值dot和circle，默认为dot。

输出
HTML

```
                
                
            
```

当前状态

通过current属性设置当前状态，可选值：succ、error、warn、issue、info、confirm、cancel和forbid，默认为info。

输出
HTML

```
                
                
            
```

如果需要修改默认状态文本，可通过lang属性修改。

输出
HTML

```
                
                
            
```

自定义颜色

通过lamp属性自定义小点的颜色，例如lamp="red"，lamp="#ff0000"等。

通过lamp和label属性可自定义任意状态。

输出
HTML

将info状态的指示灯改成了红色，使用默认文本

将info状态的指示灯改成了红色，改了默认文本
```
                
                
            
```

修改默认状态

综合使用lamp、current和label属性，可以修改默认状态。

特别是默认颜色和文本不能准确表达项目中的状态时，需要手动修改默认状态。

输出
HTML

```
                
                
            
```

Attributes属性

名称	语义类型	可选值	默认值(运行时)	说明
type	string	'dot'/'circle'	'dot'	指示灯类型
current	string	'error'/'succ'/'info'/'warn'/'issue'/'confirm'/'cancel'/'forbid'	'prim'	主题风格
label	string	''	-	标题文本
lamp	string	''	-	指示灯颜色

Methods方法

有组件通用的内置方法：

set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
reset：重置组件属性，无参数
clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

connected：组件连接成功，无参数
disconnected：组件断开连接，无参数
adopted：组件被转移，无参数
set：设置了属性，支持一个参数即设置的值
cleared：清除了属性，无参数
reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});