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