vue-count-button

A simple vue component that count the clicking times

Try online demo here: demonstration

Installation

via npm

npm install vue-count-button --save

Import

ES2015

import VueCountButton from 'vue-count-button';

CommonJS

var VueCountButton = require('vue-count-button');

script

<script type="text/javascript" src="vue/dist/vue.min.js"></script>
<script type="text/javascript" src="vue-count-button/dist/vue-count-button.js"></script>
<script type="text/javascript">
    var VueCountButton = window['vue-count-button'];
</script>

Basic Usage

<vue-count-button v-on:counter-updated="onChange"></vue-count-button>

new Vue({
    el: 'body',
    components: {
        'vue-count-button': VueCountButton
    },
    methods: {
        onChange: function(e){
            console.log(e); //e is current counter value
        }
    }
});

Props

Name	Type	Required	Description	Example
init	number	No	The initial value of the counter. 0 by default	5
txt	string	No	The text displayed in center of the counter. OK by default	'Push'
width	number	No	The width of the counter. 50 by default	70
bgColor	string	No	The ``background-color of the counter. #464646 by default	green

Events

Name	Type	Required	Description
counter-updated	in -> out	No	Get notified while counter is updated.
counter-reset	out -> in	No	Notify the counter to be reset.

Examples

Event - counter-updated

<vue-count-button v-on:counter-updated="onChange"></vue-count-button>

new Vue({
    ...
    components: {
        'vue-count-button': VueCountButton
    },
    methods: {
        onChange: function(e){
            console.log(e); //e is current counter value
        }
    }
});

Event - counter-reset

<vue-count-button v-ref:count></vue-count-button>

new Vue({
    ...
    components: {
        'vue-count-button': VueCountButton
    },
    created: function() {
        setTimeout(() => {
            //the counter will be reset from 20
            this.$refs.count.$emit('counter-reset', 20);
        }, 1000);
    }
});

LICENSE

MIT License