/vue-timeout-button

TimeoutButton component for Vue

Primary LanguageVueMIT LicenseMIT

TimeoutButton

Vue timeout button

example

Installation

npm install vue-timeout-button

import VueTimeoutButton from 'vue-timeout-button';

Vue.use(VueTimeoutButton);

Examples

Simple:

<TimeoutButton class="red-button"
               @click="submitButton"
               duration="2">
      Submit
</TimeoutButton>

Advanced:

<TimeoutButton class="red-button"
               @click="submitButton"
               @interrupting="clickedWhile"
               @completed="buttonCompleted"
               duration="3.5"
               loading-text="Loading...">
      Submit
</TimeoutButton>

Example style of the button

.red-button {
    padding          : 24px 24px;
    background-color : #e74c3c;
    color            : #fff;
    font-weight      : 700;
    width            : 200px;
    text-align       : center;
}

.red-button:focus {
    outline : none;
}

.red-button.loading {
    cursor : default;
}

Badges

pascalhesselink.nl  ·  GitHub PascalHesselink