javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(vue): update component usage examples for vue 3 (#22050)

Browse Source
This commit is contained in:
Liam DeBeasi
2020-09-11 13:48:21 -04:00
committed by GitHub
parent 74af3cb50b
commit db2cac20fb
118 changed files with 2659 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
core/src/components/loading/readme.md
View File

@ -212,35 +212,38 @@ export class LoadingExample {
```html
<template>
<IonVuePage :title="'Loading'">
<ion-button @click="presentLoading">Show Loading</ion-button>
<br />
<ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
</IonVuePage>
<ion-button @click="presentLoading">Show Loading</ion-button>
<br />
<ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
</template>
<script>
export default {
<script>
import { IonButton, loadingController } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
props: {
timeout: { type: Number, default: 1000 },
},
methods: {
presentLoading() {
return this.$ionic.loadingController
async presentLoading() {
const loading = await loadingController
.create({
cssClass: 'my-custom-class',
message: 'Please wait...',
duration: this.timeout,
})
.then(loading => {
setTimeout(function() {
loading.dismiss()
}, this.timeout)
return loading.present()
})
});
await loading.present();
setTimeout(function() {
loading.dismiss()
}, this.timeout);
},
presentLoadingWithOptions() {
return this.$ionic.loadingController
async presentLoadingWithOptions() {
const loading = await loadingController
.create({
spinner: null,
duration: this.timeout,
@ -248,16 +251,17 @@ export default {
translucent: true,
cssClass: 'custom-class custom-loading',
backdropDismiss: true
})
.then(loading=> {
setTimeout(function() {
loading.dismiss()
}, this.timeout)
return loading.present()
})
});
await loading.present();
setTimeout(function() {
loading.dismiss()
}, this.timeout);
},
},
}
components: { IonButton }
});
</script>
```

54
core/src/components/loading/usage/vue.md
View File

@ -1,34 +1,37 @@
```html
<template>
<IonVuePage :title="'Loading'">
<ion-button @click="presentLoading">Show Loading</ion-button>
<br />
<ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
</IonVuePage>
<ion-button @click="presentLoading">Show Loading</ion-button>
<br />
<ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
</template>
<script>
export default {
<script>
import { IonButton, loadingController } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
props: {
timeout: { type: Number, default: 1000 },
},
methods: {
presentLoading() {
return this.$ionic.loadingController
async presentLoading() {
const loading = await loadingController
.create({
cssClass: 'my-custom-class',
message: 'Please wait...',
duration: this.timeout,
})
.then(loading => {
setTimeout(function() {
loading.dismiss()
}, this.timeout)
return loading.present()
})
});
await loading.present();
setTimeout(function() {
loading.dismiss()
}, this.timeout);
},
presentLoadingWithOptions() {
return this.$ionic.loadingController
async presentLoadingWithOptions() {
const loading = await loadingController
.create({
spinner: null,
duration: this.timeout,
@ -36,15 +39,16 @@ export default {
translucent: true,
cssClass: 'custom-class custom-loading',
backdropDismiss: true
})
.then(loading=> {
setTimeout(function() {
loading.dismiss()
}, this.timeout)
return loading.present()
})
});
await loading.present();
setTimeout(function() {
loading.dismiss()
}, this.timeout);
},
},
}
components: { IonButton }
});
</script>
```