docs(vue): add loading usage vue docs (#17661)

This commit is contained in:
Michael Tintiuc
2019-03-02 20:03:38 +02:00
committed by Josh Thomas
parent f205b1023b
commit 928b2f7843

View File

@ -0,0 +1,48 @@
```vue
<template>
<IonVuePage :title="'Loading'">
<ion-button @click="presentLoading">Show Loading</ion-button>
<br />
<ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
</IonVuePage>
</template>
<script>
export default {
props: {
timeout: { type: Number, default: 1000 },
},
methods: {
presentLoading() {
return this.$ionic.loadingController
.create({
message: 'Loading',
duration: this.timeout,
})
.then(l => {
setTimeout(function() {
l.dismiss()
}, this.timeout)
return l.present()
})
},
presentLoadingWithOptions() {
return this.$ionic.loadingController
.create({
spinner: null,
duration: this.timeout,
message: 'Please wait...',
translucent: true,
cssClass: 'custom-class custom-loading',
})
.then(l => {
setTimeout(function() {
l.dismiss()
}, this.timeout)
return l.present()
})
},
},
}
</script>
```