Vue2AutoClose

Vue Component for Vue 2.x that displays an auto close countdown blurb.

Install

    npm install vue2-auto-close --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2AutoClose from 'vue2-auto-close';

2.1 Use it globally

Vue.use(Vue2AutoClose);

// OR with options

Vue.use(Vue2AutoClose, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-auto-close ref="http" v-model="data" :error-fn="onError"></vue2-auto-close>
</template>

components: {
    'vue2-auto-close': Vue2AutoClose
},

Properties

• secs: Number (default: 5)

• label: String (default: Closing in)

• clickToToggle: Boolean (default: 1)

• hideCancelled: Boolean (default: 1)

• cancelled: Boolean

• resetTimer: Boolean (default: 1)

• interval: Number (default: 1000)

Example

<template>
    <div id="app" style="text-align: center">
        <div v-if="!removed">
            <vue2-auto-close :hide-cancelled="false" :cancelled="c" @done="log('done')"></vue2-auto-close>

            <button class="btn btn-primary btn-sm" type="button" @click="c = !c">Toggle</button>

            <pre class="debug">c: {{c}}</pre>
        </div>

        <button class="btn btn-primary btn-sm" type="button" @click="removed = !removed">Remove</button>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2AutoClose from '../src/index'

    Vue.use(Vue2AutoClose, {});

    export default {
        name: 'app',
        data() {
            return {
                c: true,
                removed: false,
            }
        },
        methods: {
            log() {
                console.log("done!!");
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build