Project address:https://github.com/jrainlau/v …
DEMO:https://jrainlau.github.io/vu …
Introduction
Vue-Occupy
Vue 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.
Installation
Useyarn
Or ..npm
The way to install:
# yarn
yarn add vue-occupy
# npm
npm install vue-occupy
Use
Enter the project entry file and add the following code:
import VueOccupy from 'vue-occupy'
Vue.use(VueOccupy)
In this way,vue-occupy
Has been registered as a global instruction, you can in any.vue
Through the filev-occupy
Use.
Parameter
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:
<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>
Infetch
Before 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 bycontent
The content of.
Note:vue-occupy
The default configuration item for is this:
{
width: 100%;
height: 100%;
background: #eee
}
aftervue-occupy
The processed node will look like this:
<div v-occupy="{ data: content, config }">
<div style="width: 100%; height: 100%; background: #eee; ></div>
</div>
This means that youMustSet specificwidth
Andheight
You used itv-occupy
Or you can override the default style by customizing the configuration items.
Certificate
MIT