12

图片描述

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

这意味着,你必须设置具体的widthheight于你使用了v-occupy的节点,又或者你可以通过自定义配置项来覆盖默认的样式。

证书

MIT


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

wkzd2016 · 2017年03月02日

很赞,很实用之前自己手动写很麻烦

回复

jrainlau 作者 · 2017年03月02日

谢谢支持~~

回复

transtone · 2017年05月12日

github上开issue没回,这里问一下:如果我有多个地方用到了 v-occupy, 有些地方需要显示,有些地方需要继续站位,如何处理?

<template>
  <div id="app" style="width:200px;height:50px;">
    <div v-occupy="{ data: content, config }"></div>
    <div v-occupy="{ data: content1, config }"></div>
  </div>
</template>

现在的情况是,如果 content 的值被更新,但 conten1 没有更新, content1会不再显示占位符,而显示为空。

回复

0

https://github.com/jrainlau/v... 小改了一下,基本达到目的。

transtone · 2017年05月12日
Lemontree2000 · 2017年08月31日

我的项目不是通过webpack构建的, 请问怎么引入使用?

回复

载入中...