izyim/resources/assets/vue/components/common/ConfirmModalComponent.vue

<template>
    <div class="modal fade stick-up modalContainer" :data-type="this.type">
        <div class="modal-dialog modal-sm">
            <div class="modal-content-wrapper">
                <div class="modal-content">
                    <div class="modal-header clearfix text-left">
                        <button type="button" class="close" data-dismiss="modal">
                            <i class="fa fa-times fs-14"></i>
                        </button>
                        <h6 v-html="this.title"></h6>
                    </div>
                    <div class="modal-body">
                        <p class="no-margin" v-html="this.message"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-sm" :class="[{'btn-danger': this.danger}, {'btn-success': !this.danger}]" data-dismiss="modal" @click="confirm()">{{this.confirmText}}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            'title': {
                type: String,
                required: true
            },
            'message': {
                type: String,
                required: true
            },
            'type': {
                type: String,
                required: true
            },
            'confirmText': {
                type: String,
                default: 'Confirm'
            },
            'danger': {
                type: Boolean,
                default: false
            },
        },
        methods: {
            confirm(){
                this.$emit('confirm');
            }
        }
    }
</script>