054_Empty空状态

1. Empty空状态

1.1. 空状态时的占位提示。

1.2. Empty Attributes

参数	说明	类型	可选值	默认值
image	图片地址	string	无	无
image-size	图片大小(宽度)	number	无	无
description	文本描述	string	无	无

1.3. Empty Slots

name	说明
default	自定义底部内容
image	自定义图片
description	自定义描述文字

2. Empty空状态例子

2.1. 使用脚手架新建一个名为element-ui-empty折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Empty from '../components/Empty.vue'
import ImageEmpty from '../components/ImageEmpty.vue'
import SizeEmpty from '../components/SizeEmpty.vue'
import SlotsEmpty from '../components/SlotsEmpty.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Empty' },
  { path: '/Empty', component: Empty },
  { path: '/ImageEmpty', component: ImageEmpty },
  { path: '/SizeEmpty', component: SizeEmpty },
  { path: '/SlotsEmpty', component: SlotsEmpty }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Empty.vue

<template>
  <div>
    <h1>基础用法</h1>
    <el-empty description="这是空状态的描述文字"></el-empty>
  </div>
</template>

2.4. 在components下创建ImageEmpty.vue

<template>
  <div>
    <h1>自定义图片</h1>
    <h4>通过设置image属性传入图片URL。</h4>
    <el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>
  </div>
</template>

2.5. 在components下创建SizeEmpty.vue

<template>
  <div>
    <h1>图片尺寸</h1>
    <h4>通过设置image-size属性来控制图片大小。</h4>
    <el-empty :image-size="200"></el-empty>
  </div>
</template>

2.6. 在components下创建SlotsEmpty.vue

<template>
  <div>
    <h1>底部内容</h1>
    <h4>使用默认插槽可在底部插入内容。</h4>
    <el-empty>
      <template slot="default">
        <el-button type="primary">按钮</el-button>
      </template>
    </el-empty>
  </div>
</template>

2.7. 运行项目, 访问http://localhost:8080/#/Empty

2.8. 运行项目, 访问http://localhost:8080/#/ImageEmpty

2.9. 运行项目, 访问http://localhost:8080/#/SizeEmpty

2.10. 运行项目, 访问http://localhost:8080/#/SlotsEmpty