Nuanced Pumpkin Mavens

    psk-typewriter

    0.2.2 • Public • Published

    psk-typewriter

    Vue component to simulate typing text.

    Install

    Create a new vue project:

    vue create

    Install component:

    npm install --save psk-typewriter

    Environment setting

    Make a src/resources folder at the root:

    mkdir src/resources

    Configure the psk-typewriter

    Create the src/resources/psk-typewriter.js:

    import Vue from "vue";
    import TypeWriter from "psk-typewriter";
    
    Vue.use(TypeWriter, { TypeWriterName: "MyTypeWriter" });

    Import psk-typewriter

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

    import Vue from "vue";
    import App from "./App.vue";
    
    import "./resources/psk-typewriter";
    
    Vue.config.productionTip = false;
    
    new Vue({
        render: h => h(App),
    }).$mount("#app");

    How to use (example in App.vue)

    <template>
        <div>
            <my-type-writer text="And now?" @finished="playExplore = true" />
            <my-type-writer :text="explore" v-if="playExplore" />
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                playExplore: false,
                explore: "How about we explore the universe?"
            }
        }
    }
    </script>

    Properties

    Property Description Required Default
    endChar Character used at the end of the text while it is displayed. no _ (underline char)
    text Text to display yes :)
    timeout Time to display the next character no 15
    autoscroll Scroll the screen to the message no false

    Events

    Event Description
    finished When the message is all displayed

    Using in the browser

    To use directly in the browser, import psk-typewriter:

    <script src="https://unpkg.com/psk-typewriter" />

    Install

    npm i psk-typewriter

    DownloadsWeekly Downloads

    1

    Version

    0.2.2

    License

    GPLv3

    Unpacked Size

    128 kB

    Total Files

    11

    Last publish

    Collaborators

    • pauloklaus