结果 results new 待优化

用于展示操作结果

使用说明

简单引入

展开代码

<vi-result/>

结果类型

通过属性state定义不同结果类型

展开代码

<vi-result state="success"/>
<vi-result state="danger"/>
<vi-result state="warning"/>

结果样式

通过type定义不同的结果样式

展开代码

<vi-result state="success"/>
<vi-result state="success" type="plain"/>
<vi-result state="success" type="transparent"/>
<vi-divider/>
<vi-result state="danger"/>
<vi-result state="danger" type="plain"/>
<vi-result state="danger" type="transparent"/>
<vi-divider/>
<vi-result state="warning"/>
<vi-result state="warning" type="plain"/>
<vi-result state="warning" type="transparent"/>

动态效果

通过绑定布尔类型modelValue操控结果图像是否显示

展开代码

<vi-result v-model="open" state="success"/>
<vi-result v-model="open" state="success" type="plain"/>
<vi-result v-model="open" state="success" type="transparent"/>
<vi-divider/>
<vi-result v-model="open" state="danger"/>
<vi-result v-model="open" state="danger" type="plain"/>
<vi-result v-model="open" state="danger" type="transparent"/>
<vi-divider/>
<vi-result v-model="open" state="warning"/>
<vi-result v-model="open" state="warning" type="plain"/>
<vi-result v-model="open" state="warning" type="transparent"/>
<vi-divider/>
<vi-switch v-model="open"/>

大小

通过css属性--vi-result-size定义结果图像大小

展开代码

<vi-result style="--vi-result-size: 100px;"/>
<vi-result type="plain" style="--vi-result-size: 80px;"/>
<vi-result type="transparent" style="--vi-result-size: 60px;"/>

Props

属性名	描述	类型	默认值

插槽

无

事件支持

无

可覆写css变量

变量名	描述	默认值