Skip to content

Instantly share code, notes, and snippets.

@adamcrampton
Created April 23, 2021 00:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamcrampton/d99c982c96fb3ad54afd82785949aa3b to your computer and use it in GitHub Desktop.
Save adamcrampton/d99c982c96fb3ad54afd82785949aa3b to your computer and use it in GitHub Desktop.
Bootstrap 4 confirm modal for VueJs 2
<template>
<div class="modal" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialogue-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="confirmModalLabel"><slot name="modal-header"></slot></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<slot name="modal-body"></slot>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"><slot name="modal-close-button-text">Close</slot></button>
<button type="button" class="btn btn-primary" @click="confirmClicked"><slot name="modal-save-button-text" >Save</slot></button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
included: true
}
},
methods: {
confirmClicked: function() {
this.$parent.confirmClicked();
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment