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

總結

以上是生活随笔為你收集整理的054_Empty空状态的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。