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