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:
26
js/index.js
26
js/index.js
@@ -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
20
js/mixins/modal.js
Normal 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,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user