Empty

Used for displaying empty data state.

Basic Usage

Simply insert content using the default slot.

no data

No data available

暂无数据

<template>
  <div flex>
    <div style="width: 224px; border: 1px solid #eee; height: 150px; margin-right: 20px">
      <b-empty title="no data"></b-empty>
    </div>
    <div style="width: 224px; border: 1px solid #eee; height: 150px; margin-right: 20px">
      <b-empty>No data available</b-empty>
    </div>
    <div style="width: 224px; border: 1px solid #eee; height: 150px">
      <b-empty></b-empty>
    </div>
  </div>
</template>

Directive Usage

Use the v-no-data directive for dynamic assignment, with customizable display text.

<template>
  <div style="width: 224px">
    <div v-no-data:[dataText]="true" style="border: 1px solid #eee; height: 150px"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const dataText = ref('Sorry, no data available at the moment')
</script>

Props

Parameter	Description	Type	Options	Default
title	Display text	String	—	is not data

Slot

Name	Description
icon	Insert custom icon
default	Default slot, can replace text display area