1. 前言

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

2. 使用示例

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

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

在上面代碼中，假設(shè)你需要展示的內(nèi)容是content，那么你就可以判斷當(dāng)內(nèi)容有值時展示內(nèi)容，當(dāng)內(nèi)容為空時展示空數(shù)據(jù)時的占位展示圖。效果如下：

3. 組件可選屬性

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

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

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

自定義描述內(nèi)容

<Empty description="我是自定義內(nèi)容"></Empty>

顯示自定義圖片

<Empty description="顯示網(wǎng)絡(luò)圖片" image="https://www.baidu.com/img/bd_logo1.png"></Empty>

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

自定義顯示圖片樣式

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

4. 組件代碼

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

（完）

總結(jié)

以上是生活随笔為你收集整理的使用Vue封装暂无数据占位图组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。