Skip to content

ColtHands/Vue-Click-Outside-Component

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages