Empty (空状态)
空白页占位组件用于在应用中显示一个空状态页面,通常在没有数据或内容可显示时使用。它的功能亮点包括:提供默认或自定义的占位图像,支持自定义标题和描述文本,以及可固定在页面中心的位置。使用场景包括:在列表为空、搜索无结果、网络请求失败等情况下,向用户传达当前状态并提供指引。
支持平台
安卓 | ios | 鸿蒙 | web | 微信小程序 |
---|---|---|---|---|
√ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page>
<t-card main-class='m-30' title="Empty 空白页占位"
sub-title="
空白页占位组件用于在应用中显示一个空状态页面,通常在没有数据或内容可显示时使用。它的功能亮点包括:提供默认或自定义的占位图像,支持自定义标题和描述文本,以及可固定在页面中心的位置。使用场景包括:在列表为空、搜索无结果、网络请求失败等情况下,向用户传达当前状态并提供指引。"></t-card>
<t-empty title="暂无数据" descr="功能开发中,敬请期待!"></t-empty>
<t-empty mode="news" title="暂无新消息" main-class="mt-60"></t-empty>
<t-empty mode="address" title="暂无地址信息" main-class="mt-60"></t-empty>
<t-empty mode="network" title="请检查网络设置!" main-class="mt-60"></t-empty>
<t-empty mode="order" title="暂无订单" main-class="mt-60"></t-empty>
<t-empty mode="search" title="没有找到搜索的内容额~" main-class="mt-60"></t-empty>
</t-page>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
属性
名称 | 类型 | 默认值 | 说明 | 可选值 |
---|---|---|---|---|
size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
disabled | Boolean | false | 组件是否禁用 | false, true |
stop | Boolean | false | 是否阻止事件冒泡(Tui统一写法处理事件冒泡) | false, true |
hover | Boolean | true | 是否有点击效果 | false, true |
path | String | "" | 点击组件后跳转的页面路径,如果为空则响应点击事件,如果不为空则跳转页面不会响应单击事件。 | - |
mainClass | String | "" | 组件根节点的样式 | - |
nativeClass | String | "" | 组件根节点原生样式 | - |
effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
mode | String | order | 显示模式 | order : 暂无订单news : 暂无新消息address : 暂无地址信息network : 请检查网络设置search : 没有找到搜索的内容额 |
imageClass | String | `` | 图片样式 | |
titleClass | String | `` | 标题的样式 | |
descrClass | String | `` | 描述的文本的样式 | |
isFixed | Boolean | false | 是否固定 | |
src | String | `` | 替换默认图的图片地址 | |
title | String | `` | 标题样式 | |
descr | String | `` | 描述文本 |