利器——使用Vue"/>
提升用户体验的利器——使用Vue
项目地址:...
DEMO:...
介绍
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
更多推荐
提升用户体验的利器——使用Vue
发布评论