提升使用者體驗的利器——使用 Vue-Occupy 實現佔位效果

Jrain發表於2019-01-14
Vue

寫於 2017.02.28

提升使用者體驗的利器——使用 Vue-Occupy 實現佔位效果

專案地址：github.com/jrainlau/vu… DEMO：jrainlau.github.io/vue-occupy/

介紹

Vue-Occupy是一個vue指令，能夠在資料被載入之前使用一個可配置的色塊進行佔位，能夠有效提升使用者體驗。

安裝

使用yarn或者npm的方式進行安裝：

# yarn
yarn add vue-occupy

# npm
npm install vue-occupy
複製程式碼

使用

進入專案入口檔案，新增以下程式碼：

import VueOccupy from 'vue-occupy'

Vue.use(VueOccupy)
複製程式碼

這樣，vue-occupy已經被註冊為一個全域性的指令，你可以在任意.vue檔案裡面通過v-occupy使用。

引數

引數 型別 描述 是否必須
data {Object} 將要繫結在節點上的資料 Yes
config {Object} 佔位色塊的配置項 No

舉例：

<template>
  <div id="app" style="width:200px;height:50px;">
    <div v-occupy="{ data: content, config }"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: '',
      config: {
        width: '200px',
        height: '18px',
        background: '#ddd'
      }
    }
  },
  mounted () {
    fetch(url).then((result) => {
      this.content = result
    })
  }
}
</script>
複製程式碼

在fetch方法返回資料之前，<div v-occupy="{ data: content, config }"></div>這個節點會被一個矩形色塊所佔據。當資料被成功返回後，色塊將會被替換成content的內容。

注意：vue-occupy的預設配置項是這樣的：

{
  width: 100%; 
  height: 100%; 
  background: #eee
}
複製程式碼

經過vue-occupy處理的節點會變成下面這樣：

<div v-occupy="{ data: content, config }">
  <div style="width: 100%; height: 100%; background: #eee;></div>
</div>
複製程式碼

這意味著，你必須設定具體的width和height於你使用了v-occupy的節點，又或者你可以通過自定義配置項來覆蓋預設的樣式。

證書

MIT

相關文章