Result结果

2024-06-19 10:28:39首发，2个月前更新

result组件是缓存器的发展的最终形态，result组件可以展示info、succ、error和warn四种结果，可以是svg动画呈现，也可以是icon静态呈现。

前言

缓冲器组件主要表现完成前过程，而本结果组件将展示从开始到完成的动态过程，表现形式会更加连贯。ax-result是本框架自定义的结果组件。

没有任何属性（或没有to属性）则与缓冲器表现一致。

输出
HTML

```
                
                
            
```

展示结果

追加to属性则自动过度到某一个状态，可使用的值如下：

succ:表现成功状态
error：表现错误或失败状态
info：表现常规信息状态
warn：表现警告或提示状态

输出
HTML

```
                
                
            
```

图标类型

因为结果组件默认是使用svg格式的图标，所以会有动画效果；如果只想静态展示结果可设置type=font，这样将使用iconfont图标作为结果图标。

输出
HTML

```
                
                
            
```

图标轮廓

如果设置了type=font将使用字体图标，字体图标有三种轮廓，通过shape属性进行设置，可选值如下：

thick：纤细图标
thin：粗线图标（默认）
fill：实底填充图标

输出
HTML

```
                
                
            
```

文本

通过label属性设置结果文本，也可以将文本直接写在标签内。

输出
HTML

操作失败！
```
                
                
            
```

模拟操作

我们通过一个实例模拟图标变化过程。

输出
HTML
JS

```
                
                
            
```

                
                let result = document.querySelector('#result'),
                 toSucc = document.querySelector('#toSucc'),
                  toError = document.querySelector('#toError'),
                   toInfo = document.querySelector('#toInfo'),
                    toWarn = document.querySelector('#toWarn'),
                     useFont = document.querySelector('#useFont'),
                      useThick = document.querySelector('#useThick'),
                       useFill = document.querySelector('#useFill'),
                           reset = document.querySelector('#reset');
                toSucc.onclick=()=>{
                     result.setAttribute('to','succ');
                }
                toError.onclick=()=>{
                     result.setAttribute('to','error');
                }
                toInfo.onclick=()=>{
                     result.setAttribute('to','info');
                }
                toWarn.onclick=()=>{
                     result.setAttribute('to','warn');
                }
                  useFont.onclick=()=>{
                     result.setAttribute('type','font');
                }
                useThick.onclick=()=>{
                     result.setAttribute('shape','thick');
                }
                useFill.onclick=()=>{
                     result.setAttribute('shape','fill');
                }
                reset.onclick=()=>{
                    result.removeAttribute('to');
                    result.removeAttribute('type');
                     result.removeAttribute('shape');
                }

Attributes属性

ax-result为自定义标签，其包含的属性如下：

名称	可选值	默认值	说明
type	svg/font	'svg'	图标类型，默认svg
to	error/succ/info/warn	-	结果状态，默认info
shape	thin/thick/fill	'thick'	图标字体造型，type=font下有效
label	''	-	图标下方文本
bg	error/succ/info/warn	-	缓冲器颜色