@dataplain/timeoutmessage

Vue component to display ephemeral text and a countdown progress bar.

• Report bugs: https://github.com/dataplain/timeoutmessage/issues

Install

Create a new vue project:

vue create

Install component:

npm install --save @dataplain/timeoutmessage

Environment setting

Make a src/plugins folder at the root:

mkdir src/plugins

Configure the timeoutmessage.js

Create the src/plugins/timeoutmessage.js:

import Vue from "vue";
import TimeoutMessage from "@dataplain/timeoutmessage";
import "@dataplain/timeoutmessage/dist/TimeoutMessage.css";

Vue.use(TimeoutMessage, { TimeoutMessageName: "MyTimeoutMessage" });

Import timeoutmessage.js

The "src/main.js" file should look like this:

import Vue from "vue";
import App from "./App.vue";

import "./plugins/timeoutmessage";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount("#app");

How to use (example in App.vue)

<template>
    <div>
        <my-timeout-message value="Too easy." timeout="3" @timesup="showNextProgressbar" />

        <!-- if you set the message using a variable via v-model, it will be set to empty when times out -->
        <my-timeout-message v-model="anotherMessage" barClass="my-progress-color" textClass="my-progress-text" />

        <!-- you can use predefined classes from your preferred framework, such as bootstrap -->
        <my-timeout-message value="It's also very simple." barClass="bg-primary" textClass="text-primary" />
    </div>
</template>

<script>
export default {
    data() {
        return {
            anotherMessage: ""
        }
    },
    methods: {
        showNextProgressbar() {
            this.anotherMessage = 'Next progress bar!';
        }
    }
}
</script>

<style>
.my-progress-color {
    background-color: green;
}
.my-progress-text {
    color: blue;
}
</style>

Properties

Property	Description	Required	Default
v-model or value	Text message to show	no
timeout	Time in seconds	no	5
barHeight	Bar height	no	3px
barClass	CSS Class to apply on progressbar	no
textClass	CSS Class to apply on message	no

Events

Event	Description
input	To clear the message when time runs out

Using in the browser

To use directly in the browser, import @dataplain/timeoutmessage:

<script src="https://unpkg.com/@dataplain/timeoutmessage" />