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

寫於 2017.02.28

項目地址：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