A Sharp Tool to Improve User Experience-Use Vue-Occupy to Achieve Occupying Effect

  es6, Front end, frontend, javascript, vue.js


Project address:https://github.com/jrainlau/v …
DEMO:https://jrainlau.github.io/vu …


Vue-OccupyVue is a VUE instruction, which can use a configurable color block to occupy the place before the data is loaded, thus effectively improving the user experience.


UseyarnOr ..npmThe way to install:

# yarn
 yarn add vue-occupy
 # npm
 npm install vue-occupy


Enter the project entry file and add the following code:

import VueOccupy from 'vue-occupy'

In this way,vue-occupyHas been registered as a global instruction, you can in any.vueThrough the filev-occupyUse.


Parameter Type describe Is it necessary
data {Object} The data to be bound to the node Yes
config {Object} Configuration Items for Placeholder Color Blocks No

For example:

 <div id="app" style="width:200px;  height:50px;"  >
 <div v-occupy="{ data: content, config }"></div>
 export default {
 data () {
 return {
 content: '',
 config: {
 width: '200px',
 height: '18px',
 background: '#ddd'
 mounted () {
 fetch(url).then((result) => {
 this.content = result

InfetchBefore the method returns data,<div v-occupy="{ data: content, config }"></div>This node will be occupied by a rectangular color block. When the data is successfully returned, the color block will be replaced bycontentThe content of.

Note:vue-occupyThe default configuration item for is this:

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

aftervue-occupyThe processed node will look like this:

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

This means that youMustSet specificwidthAndheightYou used itv-occupyOr you can override the default style by customizing the configuration items.