-
-
Save aaronksaunders/7292b87ee30aabee5d5bd5799fad0d5d to your computer and use it in GitHub Desktop.
Ionic Modal In Vue JS, Managing Events - Part One
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<ion-app> | |
<ion-page> | |
<ion-header> | |
<ion-toolbar color="primary"> | |
<ion-title>Modal Test App</ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<ion-content padding> | |
<ion-button @click="openModal">Show Modal</ion-button> | |
</ion-content> | |
</ion-page> | |
</ion-app> | |
</template> | |
<script> | |
import SimpleModal from "./components/SimpleModal.vue"; | |
export default { | |
name: "App", | |
components: {}, | |
methods: { | |
/** | |
* called when the modal is closed | |
*/ | |
modalCloseHandler(_value) { | |
console.log("modal-closed", _value); | |
if (_value.success) { | |
// only on success | |
alert(JSON.stringify(_value.noteInfo, null, 2)); | |
} | |
}, | |
/** | |
* when the user clicks button, we open the modal | |
*/ | |
async openModal() { | |
let modal = await this.$ionic.modalController.create({ | |
component: SimpleModal, | |
componentProps: { | |
propsData: { | |
timeStamp: new Date() | |
} | |
} | |
}); | |
// show the modal | |
await modal.present(); | |
// wait to see if i get a response | |
let modalResponse = await modal.onDidDismiss(); | |
// when dismissed by clicking outside of modal, | |
// data is undefined so we do not handle it | |
modalResponse.data && this.modalCloseHandler({...modalResponse.data}) | |
} | |
} | |
}; | |
</script> | |
<style> | |
#app { | |
font-family: Avenir, Helvetica, Arial, sans-serif; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Vue from 'vue' | |
import App from './App.vue' | |
import Ionic from "@ionic/vue"; | |
import '@ionic/core/css/core.css' | |
import '@ionic/core/css/ionic.bundle.css' | |
Vue.config.productionTip = false | |
Vue.use(Ionic); | |
new Vue({ | |
render: h => h(App), | |
}).$mount('#app') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<ion-header> | |
<ion-toolbar> | |
<ion-title>Note Modal</ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<ion-content padding> | |
<ion-item> | |
<ion-label color="primary" position="floating">Title</ion-label> | |
<ion-input-vue | |
type="text" | |
name="title" | |
placeholder="Title for note..." | |
v-model="noteInfo.title" | |
></ion-input-vue> | |
</ion-item> | |
<ion-item> | |
<ion-label color="primary" position="floating">Description</ion-label> | |
<ion-textarea-vue rows="5" placeholder="Note description" v-model="noteInfo.description"></ion-textarea-vue> | |
</ion-item> | |
<ion-item style="font-size:smaller; text-align: center" lines="none"> | |
<ion-label>{{(timeStamp +"").split('(')[0]}}</ion-label> | |
</ion-item> | |
<ion-row> | |
<ion-col> | |
<ion-button expand="block" @click="modalClose(true)">Save Note</ion-button> | |
</ion-col> | |
<ion-col> | |
<ion-button expand="block" color="danger" @click="modalClose(false)">Cancel</ion-button> | |
</ion-col> | |
</ion-row> | |
</ion-content> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: "SimpleModal", | |
props: ["timeStamp"], | |
methods: { | |
modalClose: function(success) { | |
let response = { | |
success, | |
noteInfo: success ? this.noteInfo : null | |
}; | |
this.$ionic.modalController.dismiss(response); | |
} | |
}, | |
data() { | |
return { | |
noteInfo: { | |
title: "", | |
description: "" | |
} | |
}; | |
} | |
}; | |
</script> | |
<style scoped> | |
.errors { | |
font-size: smaller; | |
color: red; | |
font-weight: bold; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment