使用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

（完）