|- src/
|- router/
|- scss/
|- App.vue
|- main.js
Vue.component('modal', {
template: '#modal-template'
})
|- components/
|- MainPanel.vue (show only trigger button)
<template>
<button class="btn btn-primary btn-block" id="show-modal" @click="showModal = true">Buy</button>
<modal v-if="showModal" @close="showModal = false">
<h3 slot="header">Header of modal</h3>
</modal>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data () {
return {
showModal: false
}
}
}
</script>
|- Modal.vue (the modal component)
<template>
<div id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
|- dist/
|- index.html
|- static/
|- css/
|- fonts/
|- images/
|- js/
|- static/ (for gulp)
|- css/
|- fonts/
|- images/
|- gulpfile.js
|- node_modules/
|- package.json