vue-detect-click-outside

    1.0.1 • Public • Published

    🕵 vue-detect-click-outside

    A simple custom Vue directive to detect clicks outside an element and call a method.

    Installation

    Using Yarn:

    yarn add vue-detect-click-outside
    

    Using npm:

    npm i vue-detect-click-outside
    

    Usage

    v-click-outside="<options>"
    

    Options

    An array containing the following

    handler

    A string matching the name of a method in the same Vue component. Called when a click is detected outside the element the directive is on (or any excluded elements).
    Example: handler: 'myMethod'

    exclude

    An array of classnames of elements that we don't want to trigger the click outside event. This could be useful for a button that opens a dialog, otherwise clicking on the button will immediately close the dialog.
    Example: exclude: ['one-element', 'another-element']

    Example

    <template>
        <div>
            <div v-click-outside="{
                handler: 'clickedOutside',
                exclude: ['excluded']
            }">Clicking anywhere outside me will trigger the method</div>
    
            <div class='excluded'>Except for me!</div>
        </div>
    <template>
    
    <script>
        import clickOutside from 'vue-detect-click-outside';
    
        export default {
            methods: {
                clickedOutside() {
                    console.log('You clicked outside the element');
                }
            }
        }
    </script>
    

    Install

    npm i vue-detect-click-outside

    DownloadsWeekly Downloads

    4

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    3.42 kB

    Total Files

    4

    Last publish

    Collaborators

    • zacwebb