Tantalum UI

Appearance

Return to top
On this page

Empty 空状态

vue
<template>
  <ta-group title="基础用法">
    <ta-empty description="暂无内容"></ta-empty>
  </ta-group>
  <ta-group title="其他类型">
    <ta-empty description="出错了" type="error"></ta-empty>
    <ta-empty description="网络错误" type="network"></ta-empty>
    <ta-empty description="搜索不到" type="search"></ta-empty>
  </ta-group>
  <ta-group title="Slot default">
    <ta-empty description="网络错误" type="network">
      <ta-button type="primary" size="small"> 刷新试试 </ta-button>
    </ta-empty>
  </ta-group>
  <ta-group title="Slot image">
    <ta-empty description="网站被小猫咪吃了">
      <template #image>
        <ta-image
          class="exp-empty-custom-image"
          src="https://cdn.fox2.cn/vfox/swiper/different-1.jpg"
        />
      </template>
    </ta-empty>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'ExpEmpty'
})
</script>

Import

js
import { TaEmpty } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { EmptyType } from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
descriptionstring否描述文字
typeEmptyType'default'否图片类型，可选 'default', 'error', 'network', 'search'

Slots

底部（#default）

vue
<ta-empty description="网络错误" type="network">
  <ta-button>
    刷新试试
  </ta-button>
</ta-empty>

图片区域（#image）

vue
<ta-empty description="描述文字">
  <template #image>
    <ta-image src="xxx.jpg" />
  </template>
</ta-empty>

注：优先级比内置图片高。