使用Vue封裝暫無數據占位圖組件

1. 前言

在日常開發中，頁面上肯定有展示數據的需求，但是當某些時候該展示數據的地方此時數據為空時，就會留下一片空白，對用戶體驗不是很好，那么接下來我們就封裝一個空數據時的占位展示圖，告訴用戶此時用戶為空，並非數據沒有加載出來，不用讓用戶盲目的等待。

2. 使用示例

該組件可以直接引入到項目中使用，示例如下：

<template>
  <div id="app">
    <div v-if="content.length"></div>  
    <Empty v-else></Empty>
  </div>
  </div>
</template>

<script>
import Empty from './Empty'
export default {
  name: 'app',
  components: { Empty},
  data() {
    return {
      content:[]
    }
  }
}
</script>

在上面代碼中，假設你需要展示的內容是content，那么你就可以判斷當內容有值時展示內容，當內容為空時展示空數據時的占位展示圖。效果如下：

3. 組件可選屬性

該組件除了可以直接使用外，還提供過了一些可選屬性供個性化配置，提供可選屬性如下：

屬性名稱	描述	類型	是否必須	默認值
description	自定義描述內容	String	否	暫無數據
image	自定義顯示圖片的路徑	String	否	默認圖片
imageStyle	自定義顯示圖片的樣式	Object	否	-

組件提供了3個可選屬性，你可以這樣去使用它們：

• 自定義描述內容

  <Empty description="我是自定義內容"></Empty>
  

• 顯示自定義圖片

  <Empty description="顯示網絡圖片" image="https://www.baidu.com/img/bd_logo1.png"></Empty>
  

<Empty description="顯示項目資源圖片" :image="require('@/assets/images/warn.png')"></Empty>

• 自定義顯示圖片樣式

<template>
    <Empty 
       description="顯示網絡圖片" 
       image="https://www.baidu.com/img/bd_logo1.png" 
       :imageStyle="imageStyle">
    </Empty>
</template>
<script>
    data() {
        return {
          imageStyle:{
            width:'10px'
          }
    }
</script>

4. 組件代碼

完整代碼請戳☞Vue-Components-Library/Empty

（完）