Add global mixin for modal

This allows the modal to be used anywhere in the component hierarchy,
rather than requiring it to be in the top level.
This commit is contained in:
Patrick Smith 2018-08-23 15:50:41 -04:00
parent 8806705bc3
commit 180cedf6db
2 changed files with 26 additions and 20 deletions

View File

@ -10,9 +10,12 @@ import poc from './components/forms/poc'
import financial from './components/forms/financial'
import toggler from './components/toggler'
import NewProject from './components/forms/new_project'
import Modal from './mixins/modal'
Vue.use(VTooltip)
Vue.mixin(Modal)
const app = new Vue({
el: '#app-root',
components: {
@ -25,28 +28,11 @@ const app = new Vue({
financial,
NewProject
},
methods: {
closeModal: function(name) {
this.modals[name] = false
},
openModal: function (name) {
this.modals[name] = true
}
},
data: function() {
return {
modals: {
styleguideModal: false,
pendingFinancialVerification: false,
pendingCCPOApproval: false,
}
}
},
mounted: function() {
const modalOpen = document.querySelector("#modalOpen");
const modalOpen = document.querySelector("#modalOpen")
if (modalOpen) {
const modal = modalOpen.getAttribute("data-modal");
this.modals[modal] = true;
const modal = modalOpen.getAttribute("data-modal")
this.openModal(modal)
}
},
delimiters: ['!{', '}']

20
js/mixins/modal.js Normal file
View File

@ -0,0 +1,20 @@
export default {
methods: {
closeModal: function(name) {
this.modals[name] = false
},
openModal: function (name) {
this.modals[name] = true
}
},
data: function() {
return {
modals: {
styleguideModal: false,
newProjectConfirmation: false,
pendingFinancialVerification: false,
pendingCCPOApproval: false,
}
}
}
}