TnEmpty-空白页

此组件一般用于数据为空的时候，展示空白页

组件位置

nodeuni_modules

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	自定义提示文字内容

TnEmpty-空白页 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

自定义空白页内容颜色和尺寸 ​

修改颜色 ​

修改尺寸 ​

自定义空白页内容 ​

API ​

Props ​

Slots ​