写于 2017.02.28
项目地址: https://github.com/jrainlau/vue-occupy DEMO: https://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
来源: https://juejin.im/post/5c3c74c46fb9a049be5dbb46