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

項目地址：https://github.com/jrainlau/v...
DEMO：https://jrainlau.github.io/vu...

介紹

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