@lingcz/vue-click-outside
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

@lingcz/vue-click-outside

TODO: description

install

npm i @lingcz/vue-click-outside --save
#or
yarn add @lingcz/vue-click-outside

usage

there are three ways to use

  • as a directive
import {
    ClickOutsideDirective,
    clickOutsideDirective
} from '@lingcz/vue-click-outside'
//the name of directive default is 'click-outside',but you can pass a name as second param
//register to global
app.use(ClickOutsideDirective, 'click-outside')

// <div v-click-outside="fn" ></div>
//
//  setup() {
//      const fn = () => {}
//      return { fn }
//  }
//
//

//register to local component

export default {
    directives: {
        'click-outside': clickOutsideDirective
    }
}
  • as a component
<template>
    <ClickOutsideComponent @click-outside="clickOutside">
        <div>test1</div>
        <div>test2</div>
    </ClickOutsideComponent>
</template>
<script>
    import { ClickOutsideComponent } from '@lingcz/vue-click-outside'
    export default {
        components: {
            ClickOutsideComponent
        },
        methods: {
            clickOutside() {}
        }
    }
</script>
  • as a function
import { clickOutside } from '@lingcz/vue-click-outside'
const dom = document.getElementById('test')
const close = clickOutside(dom, () => {
    //TODO
})

//you also can pass an array
//clickOutside([dom1,dom2,...],() => {})

//then can removeListener

close()

Readme

Keywords

Package Sidebar

Install

npm i @lingcz/vue-click-outside

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

9.48 kB

Total Files

6

Last publish

Collaborators

  • lingcz