vue-click-outside-element

    1.0.15 • Public • Published

    vue-click-outside-element

    This is a simple very small directive to detect clicks ouside element not component on which this directive applied.

    For clicking outside component check Vue-Click-Outside-Component

    or search npm for vue-click-outside-component

    Install

    npm i vue-click-outside-element

    or

    yarn add vue-click-outside-element

    Usage

    Apply like basic directive.

    It accepts only functions that are present inside methods object.

    <div v-click-outside-element="someRandomFunction">Hello World</div>

    Example

    App.vue

    <template>
        <button v-click-outside-element="close" v-if="showButton">showing</button>
    </template>
    
    <script>
    import Vue from 'vue'
    import VueClickOutsideElement from 'VueClickOutsideElement'
    
    Vue.use(VueClickOutsideElement)
    
    export default {
        data() {
            return { showButton: true }
        },
        methods: {
            close(el){
                this.showButton = false
            }
        }
    }
    </script>
    

    Contrib

    • Submit issue, any bugs, issues features are accepted.
    • Clone, pull, play with example, test, submit merge request

    Roadmap

    • More tests with usability and browser compatibility
    • Strong typing with typescript
    • Supporting and tesing with Vue 3
    • Add CodeSandbox playground

    Install

    npm i vue-click-outside-element

    DownloadsWeekly Downloads

    765

    Version

    1.0.15

    License

    MIT

    Unpacked Size

    4.8 kB

    Total Files

    4

    Last publish

    Collaborators

    • coldhands