mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(vue): add vuejs usage docs
This commit is contained in:
committed by
Josh Thomas
parent
22d1aeebaa
commit
e7d41ad710
62
core/src/components/modal/usage/vue.md
Normal file
62
core/src/components/modal/usage/vue.md
Normal file
@@ -0,0 +1,62 @@
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>{{ title }}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
{{ content }}
|
||||
</ion-content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Modal',
|
||||
props: {
|
||||
title: { type: String, default: 'Super Modal' },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: 'Content',
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<ion-page class="ion-page" main>
|
||||
<ion-content class="ion-content" padding>
|
||||
<ion-button @click="openModal">Open Modal</ion-button>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from './modal.vue'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
openModal() {
|
||||
return this.$ionic.modalController
|
||||
.create({
|
||||
component: Modal,
|
||||
componentProps: {
|
||||
data: {
|
||||
content: 'New Content',
|
||||
},
|
||||
propsData: {
|
||||
title: 'New title',
|
||||
},
|
||||
},
|
||||
})
|
||||
.then(m => m.present())
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user