Vue directive for show loading block in any element.
Build by vue-cli and vue-cli-component
General usage
<script>
import loading from 'vue-loading';
export default {
directives: { loading },
data () {
return { isLoading: false }
}
}
</script>
<template>
<div v-loading="isLoading" :loading-options="{ options }"></div>
<!--click the button will show the loading block.-->
<button @click="isLoading = true"></button>
</template>You can also use vue-loading with vue-router $loadingRouteData
<script>
export default {
router: {
data (transition) {
// the vue-loading is show.
window.setTimeout(() => {
// the vue-loading will closed after next().
transition.next();
}, 3000);
}
}
}
</script>
<template>
<div v-loading="$loadingRouteData"></div>
</template>text:
- loading block text
- default value: "Loading ..."
bg:
- loading block backgroundColor css,
- default value: "rgba(230, 233, 236, 0.8)"