Empty 空状态

示例

默认

暂无数据
在 GitHub 上编辑此示例编辑
<template>
<article>
  <veui-empty/>
</article>
</template>

<script>
import { Empty } from 'veui'

export default {
  components: {
    'veui-empty': Empty
  }
}
</script>

<style scoped>
article {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

页面级

IllustrationForbidden
没有权限
请联系管理员为你添加权限
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-select
      v-model="current"
      class="picker"
      ui="s"
      :options="options"
      overlay-style="--dls-dropdown-max-display-items: 4;"
    />
  </section>
  <veui-empty
    title="没有权限"
  >
    <component :is="illustrations[current]"/>
    <template #desc>
      请联系管理员为你添加权限
      <veui-button ui="strong text">
        发送邮件
      </veui-button>
    </template>
    <template #actions>
      <veui-button ui="primary">
        回到首页
      </veui-button>
    </template>
  </veui-empty>
</article>
</template>

<script>
import { Empty, Button, Select } from 'veui'
import * as illustrations from 'dls-illustrations-vue'

const illustrationNames = [
  'IllustrationBlank',
  'IllustrationClientError',
  'IllustrationForbidden',
  'IllustrationNoResults',
  'IllustrationNotFound',
  'IllustrationReviewError',
  'IllustrationReviewPending',
  'IllustrationReviewSuccess',
  'IllustrationServerError'
]

export default {
  components: {
    'veui-empty': Empty,
    'veui-button': Button,
    'veui-select': Select
  },
  data () {
    return {
      illustrations,
      current: 'IllustrationForbidden'
    }
  },
  computed: {
    options () {
      return illustrationNames.map(name => ({
        label: name,
        value: name
      }))
    }
  }
}
</script>

<style scoped>
article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

section {
  align-self: flex-start;
}

.picker {
  width: 240px;
}
</style>

局部状态

IllustrationSpotLoadError
服务器错误
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <veui-select
      v-model="current"
      class="picker"
      ui="s"
      :options="options"
      overlay-style="--dls-dropdown-max-display-items: 4;"
    />
    <veui-radio-button-group
      v-model="size"
      ui="s"
      :items="sizes"
    />
  </section>
  <veui-empty
    :ui="size"
    desc="服务器错误"
  >
    <component :is="illustrations[current]"/>
  </veui-empty>
</article>
</template>

<script>
import { Empty, Button, Select, RadioButtonGroup } from 'veui'
import * as illustrations from 'dls-illustrations-vue'

const illustrationNames = [
  'IllustrationSpotBarChart',
  'IllustrationSpotCleared',
  'IllustrationSpotFunnelChart',
  'IllustrationSpotGaugeChart',
  'IllustrationSpotImageError',
  'IllustrationSpotLineChart',
  'IllustrationSpotLoadError',
  'IllustrationSpotMap',
  'IllustrationSpotNetworkError',
  'IllustrationSpotNoAccess',
  'IllustrationSpotNoContent',
  'IllustrationSpotNoFavorites',
  'IllustrationSpotNoHistory',
  'IllustrationSpotNoImage',
  'IllustrationSpotNoInternet',
  'IllustrationSpotNoMessages',
  'IllustrationSpotNoResults',
  'IllustrationSpotNoStore',
  'IllustrationSpotNoVideo',
  'IllustrationSpotPieChart',
  'IllustrationSpotPresentation',
  'IllustrationSpotRadarChart',
  'IllustrationSpotRelationshipChart',
  'IllustrationSpotServerError',
  'IllustrationSpotTryLater',
  'IllustrationSpotVideoError',
  'IllustrationSpotWordCloud'
]

export default {
  components: {
    'veui-empty': Empty,
    'veui-button': Button,
    'veui-select': Select,
    'veui-radio-button-group': RadioButtonGroup
  },
  data () {
    return {
      illustrations,
      current: 'IllustrationSpotLoadError',
      sizes: [
        {
          label: 'm',
          value: 'm'
        }, {
          label: 's',
          value: 's'
        }
      ],
      size: 'm'
    }
  },
  computed: {
    options () {
      return illustrationNames.map(name => ({
        label: name,
        value: name
      }))
    }
  }
}
</script>

<style scoped>
article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

section {
  display: flex;
  gap: 12px;
  align-self: flex-start;
}

.picker {
  width: 240px;
}
</style>

自定义

内置 <img> 标签

404 illustration provided by unDraw
找不到对应的内容
请检查输入的网址是否正确

任意内容

未知错误
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <h4>内置 <code>&lt;img&gt;</code> 标签</h4>
    <veui-empty
      :image="image"
      title="找不到对应的内容"
      desc="请检查输入的网址是否正确"
    />
  </section>
  <section>
    <h4>任意内容</h4>
    <veui-empty
      ui="s"
      title="未知错误"
      :desc="false"
    >
      <veui-icon
        name="exclamation-circle-solid"
        style="height: 96px; color: rebeccapurple;"
      />
    </veui-empty>
  </section>
</article>
</template>

<script>
import { Empty, Icon } from 'veui'
import 'veui-theme-dls-icons/exclamation-circle-solid'

export default {
  components: {
    'veui-empty': Empty,
    'veui-icon': Icon
  },
  data () {
    return {
      image: {
        src: 'http://ecma.bdimg.com/public01/one-design/597ed72aff7a9fbacf23ba79b43aa61d.png',
        width: 296,
        height: 197,
        alt: '404 illustration provided by unDraw'
      }
    }
  }
}
</script>

<style lang="less" scoped>
section {
  display: flex;
  flex-direction: column;
  align-items: center;

  & + & {
    margin-top: 20px;
  }
}

h4 {
  align-self: flex-start;
}
</style>

API

属性

名称类型默认值描述
uistring=-

预设样式。

描述
s小尺寸空状态。全局插图不适合小尺寸样式。
m中尺寸空状态。
imageObject | false=-插图内容配置。不传时将输出默认插图;传入 Object 时,字段将作为 <img> 元素的属性输出;传入 false 时将隐藏插图。如果为默认插槽传入了内容,此属性会被忽略。
titlestring=-空状态标题。
descstring | false=-空状态描述。传入 false 时将隐藏描述。

插槽

名称描述
default插图内容。默认情况下会展示“没有数据”对应的插图。
title标题区。
desc描述区。
actions操作区。
在 GitHub 上编辑此页面编辑