Vue.js Component: Vue 2 Simple Alert, Inspired by SweetAlert

vue2-simplert

A component to display easy and good looking modals, very similar & inspired by Sweetalert, is the Vue 2 Simple Alert Component.

Example

Install it via yarn to your Vue.js project

yarn add vue2-simplert

Import Simplert from node_modules

import Simplert from 'vue2-simplert'

<script>
export default {
   components: {Simplert}
};
</script>

and bring the component inside your templates

<simplert 
    isUseRadius=true
    isUseIcon=true
    ref="simplert">
</simplert>

To open the Simplert use a method and pass an Object Parameter

methods: {
    openSimplert () {
        this.$refs.simplert.openSimplert(this.obj)
    },
}

The object can exist within your data function

obj: {
    title: 'Opened Simplert', //  string -- title alert
    message: 'Now <b>close</b> it', // string -- message alert
    type: 'info', // string -- type : info (default), success, warning, error
    colorBtn: '#00b35e', // string -- hex color code (default: #068AC9)
    onClose: this.onClose, // function -- when close triggered
    customCloseBtnText: 'Close Simplert', //  string -- close button text
    customCloseBtnClass: 'btn btn-warning' //  string -- custom class fro button close
    // customClass: '', // string -- custom class in simplert div
    // customIconUrl: '' //  string -- custom url custom image icon
}

And open the Simplert

In it you can have custom icons, HTML, custom class for button & texts and more, which you can find on the wiki page of the documentation, Methods And Props.

Vue 2 Simple Alert Component (SweetAlert Inspired) By Irfan Maulana