TnEmpty-空白页
此组件一般用于数据为空的时候,展示空白页
组件位置
typescript
import TnEmpty from '@tuniao/tnui-vue3-uniapp/components/empty/src/empty.vue'
import TnEmpty from '@tuniao/tnui-vue3-uniapp/components/empty/src/empty.vue'
typescript
import TnEmpty from '@/uni_modules/tuniaoui-vue3/components/empty/src/empty.vue'
import TnEmpty from '@/uni_modules/tuniaoui-vue3/components/empty/src/empty.vue'
平台差异说明
App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
---|---|---|---|---|
√ | √ | √ | √ | 适配中 |
基础使用
通过mode
设置空白页的类型,可选的类型有cart
、page
、search
、address
、network
、order
、coupon
、favor
、permission
、history
、message
、list
、data
、comment
vue
<template>
<TnEmpty mode="data" />
</template>
<template>
<TnEmpty mode="data" />
</template>
自定义空白页内容颜色和尺寸
通过color
和size
可以修改空白页内容的颜色和大小,颜色值可以传递hex
、rgb
、rgba
和图鸟内置颜色的值文本颜色
size
可以设置sm
、lg
和xl
,也可以传递指定的尺寸大小
修改颜色
vue
<template>
<TnEmpty mode="data" color="tn-gray-disabled" />
</template>
<template>
<TnEmpty mode="data" color="tn-gray-disabled" />
</template>
修改尺寸
vue
<template>
<TnEmpty mode="data" size="sm" />
</template>
<template>
<TnEmpty mode="data" size="sm" />
</template>
自定义空白页内容
通过slot
可以自定义空白页的内容,在icon
的插槽中可以自定义图标,tips
的插槽中可以自定义提示内容
vue
<template>
<TnEmpty mode="data">
<template #icon>
<image src="https://tnuiimage.tnkjapp.com/avatar/normal/4.png" />
</template>
<template #tips>用户不存在</template>
</TnEmpty>
</template>
<template>
<TnEmpty mode="data">
<template #icon>
<image src="https://tnuiimage.tnkjapp.com/avatar/normal/4.png" />
</template>
<template #tips>用户不存在</template>
</TnEmpty>
</template>
API
Props
属性名 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
mode | 空白提示类型,有效值可以查看上方说明 | String | - | 看上方说明 |
color | 内容颜色,支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
size | 内容大小,默认单位为 rpx,可以传入带单位的尺寸值 | String | - | sm \ lg \ xl |
show-tips | 是否显示空白提示 | Boolean | true | false |
Slots
插槽名 | 说明 |
---|---|
icon | 自定义图标显示内容 |
tips | 自定义提示文字内容 |