Null Pointer Micromanagement

    vue-click-outside-component

    1.0.3 • Public • Published

    vue-click-outside-component

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

    For clickin outside element inside the component check Vue-Click-Outside-Element

    or search npm for vue-click-outside-element

    Install

    npm i vue-click-outside-component

    or

    yarn add vue-click-outside-component

    Usage

    Apply like basic directive.

    It accepts only functions that are present inside methods object.

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

    Examples

    This will work since its attached to root element

    <template>
        <div v-click-outside-component="close">
            <p v-if="show">if you click button this text will dissappear</p>
            <p>but the button does not have any events on it</p>
        </div>
    </template>
    
    <script>
    import Vue from 'vue'
    import VueClickOutsideComponent from 'VueClickOutsideComponent'
    
    Vue.use(VueClickOutsideComponent)
    
    export default {
        data() { return { showButton: true } },
        methods: {
            close(el){
                this.showButton = false
            }
        }
    }
    </script>
    

    This will not work since its not attached to existing dom node.

    <template v-click-outside-component="close">
        <div>
            <p v-if="show">if you click button this text will dissappear</p>
            <p>but the button does not have any events on it</p>
        </div>
    </template>
    

    This will work but will trigger 'close' fn in the same scope and will not get passed inside the component. For that, use vue-click-outside-element.

    <template>
        <div>
            <myComponent v-click-outside-component="close" />
            <p v-if="show">if you click button this text will dissappear</p>
            <p>but the button does not have any events on it</p>
        </div>
    </template>
    
    <script>
    import Vue from 'vue'
    import VueClickOutsideComponent from 'VueClickOutsideComponent'
    import myComponent from './myComponent.vue'
    
    Vue.use(VueClickOutsideComponent)
    
    export default {
        components: { myComponent }
        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
    • Any feedback would be greatly appreciated.

    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-component

    DownloadsWeekly Downloads

    29

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    5.28 kB

    Total Files

    3

    Last publish

    Collaborators

    • coldhands