组件库文档 tmui.design
结果页 Result
主要用来显示页面当前状态,比如空,出错等。
🌶️ 结果页 Result 示例
查看模拟效果+
示例模板
vue
<template>
<tm-app color="white">
<tm-sheet>
<tm-text :font-size="24" _class="text-weight-b" label="基础示例,更多见文档"></tm-text>
</tm-sheet>
<tm-result color="green" status="success"></tm-result>
<tm-result :showBtn="false"></tm-result>
<tm-result :showBtn="false" color="red" status="network"></tm-result>
</tm-app>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmResult from '@/tmui/components/tm-result/tm-result.vue'
</script>
🌶️ 兼容性
APP-VUE | APP-NVUE | 小程序 | WEB/H5 | VUE3/TS |
---|---|---|---|---|
✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
🌱 参数
本组件含有公共属性 公共属性
参数名 | 类型 | 默认值 | 描述 |
---|---|---|---|
status | String | 'empty' | empty,error,success,warning,lock,network |
icon | String | '' | 图标名称或者图片地址 |
color | String | 'primary' | 图标颜色 |
title | String | '' | 标题 |
subTitle | String | '' | 标题下的副标题描述 |
btnText | String | '确认' | 按钮文字 |
followTheme | [Boolean] | true | 是否跟随全局主题的变换而变换 |
followDark | [Boolean] | true | 是否跟随暗黑 |
text | [Boolean] | true | 是否浅色背景 |
size | [Number] | 140 | 尺寸 |
dark | [Boolean,String] | false | 暗黑 |
showBtn | Boolean | true | 是否显示底部的操作按钮。 |
clickDisabled | Boolean | true | 默认禁用。是否禁用整个组件的点击事件触发。 |
🌹 事件
事件名 | 参数 | 返回数据 | 描述 |
---|---|---|---|
@click | event | 点击按钮时触发 | |
@resultClick | event | 点击整个组件时触发,可通过clickDisabled禁止触发 |
🌽 slot插槽
属性名称 | 类型 | 数据 | 说明 |
---|---|---|---|
default |
🥗 ref方法
无
贡献者
Mr.童