<template>
<div id="{{ id }}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalWindow">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title text-danger" id="gridSystemModalLabel"><i class="fa fa-warning"></i> Atenção!</h3>
</div>
<div class="modal-body"><slot></slot></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" @click="confirm(false)">Não</button>
<button type="button" class="btn btn-primary" @click.prevent="confirm(true)">Sim</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['id','item'],
methods: {
confirm(trueOrFalse) {
if (trueOrFalse) {
$("#" + this.id)
.find('.btn-primary')
.addClass('disabled').text('')
.append('<i class="fa fa-spinner fa-spin"></i> Aguarde!')
}
setTimeout(() => {
$("#" + this.id)
.find('.btn-primary')
.removeClass('disabled').text('Sim')
}, 2000);
this.$dispatch('return-modal-confirm', trueOrFalse, this.id, this.item)
}
}
}
</script>
This is a modal confirmation window to work with VueJS.
Save this file as a .vue file and have it compiled with vueify
Requires VueJS (duh), Twitter Bootstrap and Font Awesome
You must provide an exclusive ID and the Item to be confirmed. If the user confirms, it dispatches an event called 'return-modal-confirm' with the result (true), the modal ID (so you can close it programatically) and the item.
Usage:
<confirmation-window :id="uniqueID" :item="VueJSObject">
Are you sure you want to delete this object?
</confirmation-window>
It works fine on VueJS v1.0.26 and up
It doesn't work on VueJS 2
Save this file as a .vue file and have it compiled with vueify
Requires VueJS (duh), Twitter Bootstrap and Font Awesome
You must provide an exclusive ID and the Item to be confirmed. If the user confirms, it dispatches an event called 'return-modal-confirm' with the result (true), the modal ID (so you can close it programatically) and the item.
Usage:
<confirmation-window :id="uniqueID" :item="VueJSObject">
Are you sure you want to delete this object?
</confirmation-window>
It works fine on VueJS v1.0.26 and up
It doesn't work on VueJS 2
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.