4.1 KiB
4.1 KiB
title, description, spline, isComponent
| title | description | spline | isComponent |
|---|---|---|---|
| Result 结果 | 反馈结果状态。 | data | true |
该组件于 0.16.0 版本上线，请留意版本。
引入
全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。
"usingComponents": {
"t-result": "tdesign-miniprogram/result/result"
}
代码演示
Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"
组件类型
基础结果
{{ theme }}
带描述的结果
{{ description }}
自定义结果
{{ custom }}
常见问题
本地图片无法正确引用? 👇
建议使用绝对路径，而不是相对路径。绝对路径以 app.json 所在位置为基准。
API
Result Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| style | Object | - | 样式 | N |
| custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N |
| description | String / Slot | - | 描述文字。通用类型定义 | N |
| icon | String / Boolean / Object | true | 图标名称。值为字符串表示图标名称，值为 false 表示不显示图标，值为 Object 类型，表示透传至 icon，不传表示使用主题图标。 |
N |
| image | String / Slot | - | 图片地址。通用类型定义 | N |
| theme | String | default | 内置主题。可选项：default/success/warning/error | N |
| title | String / Slot | '' | 标题。通用类型定义 | N |
Result External Classes
| 类名 | 描述 |
|---|---|
| t-class | 根节点样式类 |
| t-class-description | 描述样式类 |
| t-class-image | 图片样式类 |
| t-class-title | 标题样式类 |
CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --td-result-description-color | @font-gray-2 | - |
| --td-result-description-font-size | @font-size-base | - |
| --td-result-description-line-height | 44rpx | - |
| --td-result-description-margin-top | @spacer | - |
| --td-result-icon-default-color | @brand-color | - |
| --td-result-icon-error-color | @error-color | - |
| --td-result-icon-success-color | @success-color | - |
| --td-result-icon-warning-color | @warning-color | - |
| --td-result-title-color | @font-gray-1 | - |
| --td-result-title-font-size | @font-size-l | - |
| --td-result-title-line-height | 56rpx | - |
| --td-result-title-margin-top | @spacer-1 | - |