Neutral Political Machine

    vue-directives-library

    1.0.11 • Public • Published

    Vue 3 Directives Library

    This library is a beta and has only one directive at this moment.

    Directives

    • Outside - Check for events outside an element.

    Install (with npm)

    npm install vue-directives-library
    

    How to use

    Outside

    Observe events outside of an element. For example a mouse click. Just import the outside directive into your component.

    import { outside } from "vue-directives-library/lib/outside"; // Vue 2
    import { outside } from "vue-directives-library/vue3/outside"; // Vue 3
    
    export default {
        ...
        directives: {
            outside
        },
        methods: {
            doSomething: function (){
                alert('You clicked the div!');
            }
        },
        ...
    }
    

    Now you can use the directive with your elements. The following example shows a div. If you click outside the div, the method 'doSomething' will be done.

    <template>
        <div>
            <div v-outside:click="{ handler: 'doSomething' }">CLICK HERE</div>
        </div>
    </template>
    

    You can also exclude elements from the directive. That means if you click on these elements outside the element with the directive on it, nothing happens.

    <div v-outside:click="{ exclude: ['mega', '#super', '.top'], handler: 'doSomething' }">CLICK HERE</div>
    

    Now all elements with 'mega' as vue reference (ref), 'super' as element id or with class 'top' have no affect and dont do the method 'doSomething'.

    Install

    npm i vue-directives-library

    DownloadsWeekly Downloads

    4

    Version

    1.0.11

    License

    ISC

    Unpacked Size

    7.34 kB

    Total Files

    4

    Last publish

    Collaborators

    • normanbraun