Vue-count-button NPM

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

vue count button

@infinitebrahmanuniverse/nolb-vue-co @everything-registry/sub-chunk-3077

1.0.0

9 years ago