https://github.com/jrainlau/vue-occupy

A Vue directive for occupying content places before the data has been loaded.
https://github.com/jrainlau/vue-occupy

javascript vue vue-directive

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jrainlau/vue-occupy
• Owner: jrainlau
• License: mit
• Created: 2017-02-26T05:50:34.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-13T07:06:16.000Z (almost 8 years ago)
• Last Synced: 2025-01-03T06:46:11.454Z (about 2 months ago)
• Topics: javascript, vue, vue-directive
• Language: JavaScript
• Homepage: https://jrainlau.github.io/vue-occupy/
• Size: 377 KB
• Stars: 217
• Watchers: 7
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

```

  


    


  


export default {

  data () {

    return {

      content: '',

      config: {

        width: '200px',

        height: '18px',

        background: '#ddd'

      }

    }

  },

  mounted () {

    fetch(url).then((result) => {

      this.content = result

    })

  }

}

```

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:

```