Empty空状态

基础用法

<template>
  <div class="t-basic-empty-area">
    <as-empty description="描述文字"></as-empty>
  </div>
</template>
<script>
export default {
  name: "t-basic-empty",
}
</script>
<style>
</style>

Expand Copy Copy

自定义图片

<template>
  <div class="t-images-empty-area">
    <as-empty image="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"></as-empty>
  </div>
</template>
<script>
export default {
  name: "t-images-empty",
}
</script>
<style>
</style>

Expand Copy Copy

图片尺寸

<template>
  <div class="t-size-empty-area">
    <as-empty :image-size="100"></as-empty>
  </div>
</template>
<script>
export default {
  name: "t-size-empty",
}
</script>
<style>
</style>

Expand Copy Copy

底部内容

使用默认插槽可在底部插入内容。

按钮

<template>
  <div class="t-footer-empty-area">
    <as-empty>
      <as-button type="primary">按钮</as-button>
    </as-empty>
  </div>
</template>
<script>
export default {
  name: "t-footer-empty",
}
</script>
<style>
</style>

Expand Copy Copy

Attributes

参数	默认值	说明
image	--	图片地址,类型为String
image-size	--	图片大小(宽度),类型为Number
description	--	文本描述,类型为String

Slot

名称	说明
default	自定义头像展示内容
image	自定义图片
description	自定义描述文字