提升用户体验的利器——使用 Vue

利器——使用 Vue"/>

提升用户体验的利器——使用 Vue

写于 2017.02.28

项目地址：github/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使用。

参数

举例：

<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