主题
Result 结果页
展示成功、失败、警告或处理中等结果状态。
支持平台
以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 操作结果 -->
<fui-result type="success" title="提交成功" descr="可在列表中查看结果" />属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| paddingTop | Number / String | 容器上内边距,单位 rpx | 96 |
| type | String | 图标类型:success、warning、fail、waiting | - |
| background | String | 图标背景色,不设置时使用类型对应颜色 | - |
| iconColor | String | 图标颜色 | #fff |
| scaleRatio | Number | 图标缩放比例 | 1 |
| title | String | 标题 | - |
| size | Number / String | 标题字号,单位 rpx | 44 |
| color | String | 标题颜色 | #181818 |
| descr | String | 描述 | - |
| descrSize | Number / String | 描述字号,单位 rpx | 32 |
| descrColor | String | 描述颜色 | #333 |
插槽和平台说明
icon 插槽可自定义图标,默认插槽位于描述下方。非 nvue 平台的默认标题和描述颜色可通过主题变量调整。组件未声明自定义事件。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| — | 无自定义事件 | — |
插槽
| 插槽 | 说明 |
|---|---|
| default | 结果描述下方的自定义内容 |
| icon | 自定义图标 |