0.3.0 • Published 6 years ago
vue-wait-component v0.3.0
Vue Wait Component
When load is delayed if it is later than the response.
Usage
$ npm install vue-wait-component
or
$ yarn add vue-wait-component
WaitList
API response wait component.
props | type | description |
---|---|---|
wait | Number | delay the loading effect |
promiseMethod | Promise | api request object |
WaitImg
Image response wait component.
props | type | description |
---|---|---|
wait | Number | delay the loading effect |
src | String | image source url |
alt | String | image description |
width | Number | image width |
height | Number | image height |
<template>
<div>
<wait-list
:wait=1000
:promiseMethod="sample()">
<p slot="loading">loading</p>
<div slot="loaded">
<li v-for="val in data" :key="val.text">
<p>{{ val.text }}</p>
</li>
</div>
</wait-list>
<wait-img
src="https://~~~.com/~~~.jpg"
alt="test"
:width=300
:wait=100>
<p slot="loading">loading</p>
</wait-img>
</div>
</template>
<script>
import { WaitList, WaitImg } from 'vue-wait-component'
export default {
components: { WaitList, WaitImg },
data() {
return {
data: [],
};
},
methods: {
sample() {
return new Promise(resolve => {
setTimeout(() => {
let data = [{text: "a"}, {text: "b"}, {text: "c"}]
resolve(data)
}, 3000);
}).then(response => {
this.data = response;
});
},
}
};
</script>