• Stars
    star
    217
  • Rank 182,446 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Vue directive for occupying content places before the data has been loaded.

Vue-Occupy

A Vue directive for occupying content places before the data has been loaded.

It's good for user experiment improving.

Install

Using yarn or npm to install vue-occupy:

# yarn
yarn add vue-occupy

# npm
npm install vue-occupy

Usage

In your main.js file:

import VueOccupy from 'vue-occupy'

Vue.use(VueOccupy)

Now vue-occupy is a global Vue directive, you can use v-occupy in every .vue file.

Params

param type description necessary
data {Object} the data you bind to the node Yes
config {Object} the color lump's css config No

For example:

<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>

Before the fetch method has requested the result data, the div with v-occupy="{ data: content, config }" would be occupying by a rectangle color lump. Once the data was loaded, the attribute content would be updated and be rendered into the html.

Note: the default configuration of vue-occupy looks like below:

{
  width: 100%; 
  height: 100%; 
  background: #eee
}

And the note with v-occupy will be like this:

<div v-occupy="{ data: content, config }">
  <div style="width: 100%; height: 100%; background: #eee;></div>
</div>

Which means your must set the exactly width and height attribute in the note with v-occupy, or overwrite the default configuration by binding config attribute. What's more, attributes like marginTop or paddingRight are illegal, you should write in 'margin-top': '10px' or 'padding-right': '10px' instead.

Lisence

MIT

More Repositories

1

markcook

A smart and beautiful markdown editor.
Vue
550
star
2

canjs

CanJS is a javascript interpreter, which can run JS code in JS.
JavaScript
339
star
3

draw-something

使用VueJS和WebSocket技术实现的你画我猜小游戏
Vue
267
star
4

scion

Scion is a scaffold for initiating new projects from a given template.
TypeScript
180
star
5

picee

Using Github as your image hosting service.
JavaScript
166
star
6

MY-Kit

基于 Vite 的超丝滑 Vue3 组件库开发框架
CSS
162
star
7

smartour

makes website tour guide much easier.
TypeScript
156
star
8

taxi-together-client

一起打车吧微信小程序客户端
JavaScript
114
star
9

LowPolifier

Style an image with low-poly
JavaScript
98
star
10

sphinx

A very light JS library which could encode a string to an image, or decode an image to a string.
JavaScript
73
star
11

vue-skeleton

JavaScript
66
star
12

chat-input-box

Web聊天工具的富文本输入框
61
star
13

vue-donut

A template work with vue-cli, it helps you build your own VueJS basic UI component library in an easy way.
JavaScript
57
star
14

motto

A tool to show your motto in an amazing way
JavaScript
49
star
15

MintloG

使用Vuejs+Webpack+VueRouter+VueResource搭建的博客SPA
JavaScript
46
star
16

rhyke

Use morse code rhythm to awake something.
JavaScript
42
star
17

filemap

A tool for creating files structure tree map.
JavaScript
41
star
18

blog-articles

My personal blog.
HTML
39
star
19

tiny-reactive

JavaScript
31
star
20

mongoose_crud

使用express与mongoose对mongodb数据库进行增删改查操作demo
JavaScript
29
star
21

elf

一个干净,轻巧的响应式CSS框架。
CSS
26
star
22

taxi-together-server

taxi wechat mini program server
Python
23
star
23

vonut

A personal blog system made by VueJS.
JavaScript
23
star
24

online-code-runner

Online code runner, works like Codepen
Vue
21
star
25

VueComponentsCommunicateDemo

实现了vuejs组件之间的通讯问题
JavaScript
19
star
26

mog

A very easy data binding instance.
JavaScript
18
star
27

gulp-html-import

A gulp plugin which can import .html files into .html files
JavaScript
17
star
28

webpack-learning

JavaScript
16
star
29

wallpaper-downloader

Python
10
star
30

dolu

A light weight tool for photo uploading
JavaScript
9
star
31

markssue

🍘 Markdown previewer for editing Github issues.
JavaScript
8
star
32

vue-composition-api-demo

Vue
5
star
33

python-learning

记录我的python学习路线
Python
5
star
34

node-redis-missions-queue

TypeScript
5
star
35

jsdoc2configs

Convert JSDoc to any configs
TypeScript
4
star
36

TodoMVC-PWA

CSS
3
star
37

gulp-tools

gulp功能包
JavaScript
3
star
38

node-learning

nodejs学习
JavaScript
3
star
39

kaleido

A free wallpaper downloader relates to
JavaScript
2
star
40

bsdiff-cli

bsdiff globally
JavaScript
2
star
41

extract-yaml-from-markdown-plugin

extract yaml information from a markdown file automatically
JavaScript
2
star
42

rust_learning_check_list

My Rust learning check list
Rust
1
star
43

oChat-client

Vue
1
star
44

longit.js

A tool to format long number string which is longer than Number.MAX_SAFE_INTEGER and Number.MAX_VALUE.
JavaScript
1
star
45

flutter-learning

Dart
1
star
46

oChat-server

Python
1
star
47

happy_wedding

Vue
1
star
48

injector

A Chrome extension for injecting custom stylesheet to any website.
JavaScript
1
star
49

huya-tools

JavaScript
1
star
50

learning-vue-by-steps

JavaScript
1
star
51

lottie-converter

Export any frames of a lottie, convert lottie to APNG、GIF、MP4.
Vue
1
star
52

koa-learning

JavaScript
1
star
53

ts-learning

TypeScript
1
star