空状态 Empty

空显示状态，用于给内部无数据情况的展示。十分简单

基础用法

直接用组件默认插槽插入即可

no data

当前无数据

暂无数据

<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>当前无数据</b-empty>
    </div>
    <div style="width: 224px; border: 1px solid #eee; height: 150px">
      <b-empty></b-empty>
    </div>
  </div>
</template>

<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>当前无数据</b-empty>
    </div>
    <div style="width: 224px; border: 1px solid #eee; height: 150px">
      <b-empty></b-empty>
    </div>
  </div>
</template>

指令方式

可以使用v-no-data指令动态指定，并可以绑定显示文字

<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('抱歉，暂时没有数据')
</script>

<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('抱歉，暂时没有数据')
</script>

Props

参数	说明	类型	可选值	默认值
title	显示文字	String	—	暂无数据

Slot

名称	说明
icon	可插入图标
default	默认插槽，可替换文字显示位置

空状态 Empty ​

基础用法 ​

指令方式 ​

Props ​

Slot ​

空状态 Empty

基础用法

指令方式

Props

Slot