Node Package Maid

    vue-bootalert

    0.0.1 • Public • Published

    vue-bootalert

    VueJS component for generating Bootstrap alerts

    Installation

    # install with npm
    npm install vue-bootalert --save
    var VueBootalert = require('vue-bootalert')
    Vue.use(VueBootalert)

    Usage

    Add as a component:

    components: {
        VueBootalert
    }

    You can then create an alert with:

    <bootalert message="Your message here"></bootalert>

    You can configure the alert with the following parameters:

    Name Description Required Allowed Values Type Default Value
    type The alert style, taken from Bootstrap alert classes N info, warning, success, danger String info
    message The message to display in the alert Y Text/HTML String nil
    shouldDisappear The alert should disappear automatically after a period of time N true, false Boolean true
    displayTime The time in miliseconds the message should stay on screen for (if shouldDisappear is set to true) N Integer 5000
    alertDismissable Allow the user to close the alert by clicking on X N Dismissable if present false

    Examples

    Basic Usage

    <bootalert type="danger" message="test message 1 (dismisable)" shouldDisappear="false" alertDismissable></bootalert>
    <bootalert type="success" message="test message 2"></bootalert>

    Dynamically creating alerts

    <bootalert v-for="(alert,index) in alerts" :key="index" v-bind:type="alert.type" v-bind:message="alert.message" v-bind:shouldDisappear="alert.shouldDisappear" alertDismissable></bootalert>
    export default {
        data: function() {
          return {
            alerts: []
          }
        },
        methods: {
          createErrorAlert: function(message) {
            this.alerts.push({
              type: 'danger',
              message: message,
              shouldDisappear: false
            });
          }
        }
    }
    
    // Then call createErrorAlert when you want a new message
    createErrorAlert("Your message here")

    Install

    npm i vue-bootalert

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • craigharman