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

20
core/src/components/refresher/readme.md
View File

@ -237,7 +237,7 @@ export class RefresherExample {
<ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content
pulling-icon="chevron-down-circle-outline"
:pulling-icon="chevronDownCircleOutline"
pulling-text="Pull to refresh"
refreshing-spinner="circles"
refreshing-text="Refreshing...">
@ -247,20 +247,24 @@ export class RefresherExample {
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
doRefresh(event) {
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
import { chevronDownCircleOutline } from 'ionicons/icons'
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonContent, IonRefresher, IonRefresherContent },
setup() {
const doRefresh = (event: CustomEvent) => {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
return { chevronDownCircleOutline, doRefresh }
}
});
</script>
```

18
core/src/components/refresher/usage/vue.md
View File

@ -18,7 +18,7 @@
<ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content
pulling-icon="chevron-down-circle-outline"
:pulling-icon="chevronDownCircleOutline"
pulling-text="Pull to refresh"
refreshing-spinner="circles"
refreshing-text="Refreshing...">
@ -28,19 +28,23 @@
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
import { chevronDownCircleOutline } from 'ionicons/icons'
import { defineComponent } from 'vue';
@Component()
export default class Example extends Vue {
doRefresh(event) {
export default defineComponent({
components: { IonContent, IonRefresher, IonRefresherContent },
setup() {
const doRefresh = (event: CustomEvent) => {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
return { chevronDownCircleOutline, doRefresh }
}
});
</script>
```